HTML
HTML Quotation and Citation Elements
HTML offers a range of quotation and citation elements designed to provide clear structure and semantic meaning to your content. These tags, such as <blockquote>
, <q>
, <cite>
, and <abbr>
, allow you to properly format quotes, references, and abbreviations while enhancing accessibility and improving readability. By using these elements, you ensure that your web content is both user-friendly and SEO-optimized.
Example:
Here’s an example using a block quote from SitePoint’s job section:
<blockquote cite="https://www.sitepoint.com/jobs-for-developers/">
"Find a remote job that works for you. SitePoint Jobs is your resource for remote job listings, whether you're a developer, designer, or marketer."
</blockquote>
This <blockquote>
example represents a longer quotation with proper attribution, using the cite
attribute to link back to the source.
Output:
"Find a remote job that works for you. SitePoint Jobs is your resource for remote job listings, whether you're a developer, designer, or marketer."
All Quotation and Citation Tags
Tag | Description |
---|---|
<blockquote> |
Defines a block-level quote, often used for longer quotations from other sources. |
<q> |
For short inline quotes. Browsers generally add quotation marks automatically. |
<abbr> |
Defines abbreviations, often paired with a title attribute for clarification. |
<address> |
Used for contact details, such as names, addresses, or emails. |
<cite> |
References the title of a creative work, such as a book or article. |
<bdo> |
Bi-Directional Override: controls text direction for languages like Arabic. |
HTML Tag: <blockquote>
The <blockquote>
tag is used to display longer quotes that appear as a block of text, typically indented. It’s useful for quoting larger sections from external sources.
Syntax:
<blockquote cite="URL-to-source">
Quoted content here.
</blockquote>
Example:
Here’s an example of quoting content from Wikipedia’s HTML page:
<blockquote cite="<https://en.wikipedia.org/wiki/HTML>">
"HTML is the standard markup language for documents designed to be displayed in a web browser."
</blockquote>
In this example, the quote is taken from the Wikipedia article on HTML, and the cite
attribute provides a link to the original source. The blockquote visually separates the quoted text from the surrounding content.
Output:
"HTML is the standard markup language for documents designed to be displayed in a web browser."
HTML Tag: <q>
The <q>
tag is used for shorter, inline quotes, making it perfect for embedding quotations within a paragraph.
Syntax:
<p>This is a <q>short quote</q> in HTML.</p>
Example:
<p>As Mark Twain said, <q>The secret of getting ahead is getting started.</q></p>
Output:
As Mark Twain said, The secret of getting ahead is getting started.
HTML Tag: <abbr>
The <abbr>
tag represents an abbreviation or acronym, often enhanced with a title
attribute for the full explanation.
Syntax:
<abbr title="Hypertext Markup Language">HTML</abbr>
Example:
<p>The standard language for creating web pages is <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
Output:
The standard language for creating web pages is HTML.
HTML Tag: <address>
The <address>
tag is used to display contact information for the author, owner, or entity associated with the webpage. The text inside the <address>
tag typically renders in italics, and line breaks are included where appropriate.
Syntax:
<address>
Written by Jane Doe.<br>
Contact: jane@example.com
</address>
Example:
Here’s an example using SitePoint’s contact information:
<address>
SitePoint<br>
10-12 Gwynne St,<br>
Richmond VIC 3121<br>
Australia<br>
Email: support@sitepoint.com
</address>
In this example, the <address>
tag is used to display SitePoint's physical and email contact information in a clean, structured format with appropriate line breaks.
Output:
SitePoint10-12 Gwynne St,
Richmond VIC 3121
Australia
Email: support@sitepoint.com
HTML Tag: <cite>
The <cite>
tag is used to reference the title of a creative work, such as books, articles, or films.
Syntax:
<cite>Title of the work</cite>
Example:
<p>This excerpt is from <cite>Effective Web Development</cite>.</p>
Output:
This excerpt is from Effective Web Development.
HTML Tag: <bdo>
The <bdo>
tag stands for Bi-Directional Override, allowing you to control the direction of the text—useful for right-to-left languages.
Syntax:
<bdo dir="rtl">This text is displayed from right to left.</bdo>
Example:
<bdo dir="rtl">HTML Quotation Example</bdo>
Output:
HTML Quotation Example
FAQs on HTML Quotations and Citations
What are HTML quotation and citation elements?
Quotation and citation elements like <blockquote>
, <q>
, and <cite>
are used to display quoted text or reference creative works, ensuring semantic structure and proper browser rendering.
What is the purpose of the <cite>
tag?
The <cite>
tag is used to reference the title of a creative work, such as books, articles, films, research papers, or websites. It provides a semantic indication that the text within the tag refers to a cited work. Most browsers render the content inside the <cite>
tag in italics by default, helping distinguish it visually as a reference or title.
The <cite>
tag helps improve the accessibility and semantic structure of web pages by clearly marking the titles of referenced works. This is useful for search engines, assistive technologies, and readers to understand that the text is a citation.
What is the difference between <cite>
and <blockquote>
?
The difference between <cite>
and <blockquote>
is in their purpose and usage:
<cite>
is used to reference the title of a work, such as a book, article, or movie. It's meant to identify the source of a piece of information, and is typically rendered in italics.<blockquote>
is used for longer, block-level quotations from external sources. It visually separates the quoted material from the surrounding content, often with indentation, and can include acite
attribute to provide the source of the quote.
In short, <cite>
names the source, while <blockquote>
presents the actual content from the source.
What is an example of the tag?
The <q>
tag is used to define short, inline quotations in HTML. Unlike the <blockquote>
tag, which is used for longer, block-level quotes, the <q>
tag is meant for shorter quotes that are embedded within the surrounding text. When rendered in the browser, most browsers automatically add quotation marks around the content inside the <q>
tag.
<p>Albert Einstein once said, <q>Life is like riding a bicycle. To keep your balance, you must keep moving.</q></p>