HTML Quotations
In this page:
The blockquote Element
The blockquote tag wraps long, multi-line quotations that are taken from external sources. The browser automatically indents these sections to separate them visually from your normal body paragraphs.
Note: Use the cite attribute inside the blockquote to link search engines directly to the source URL.
Warning: Do not use blockquote purely to indent regular text layouts as it breaks screen-reader accessibility rules.
Example: The blockquote Element
<blockquote cite="https://example.com/source">
This is a long quotation taken from an external source,
which the browser indents to set it apart from the page's normal text.
</blockquote>Short Inline Quotes with q
For short quotes that fit comfortably inside a regular paragraph, use the q tag. Instead of styling these quotes with indentations, the browser automatically wraps the text inside proper quotation marks.
Note: Avoid typing quotation marks manually inside a q tag, as the browser will do it for you.
Warning: Different browsers might render nested q tags with different quotation styles, so keep your nested quotes simple.
Example: Short Inline Quotes with q
<p>She said <q>this is a short quote</q> during the interview.</p>Defining Abbreviations with abbr
The abbr tag identifies abbreviations and acronyms. By adding a title attribute to this tag, you can provide the full-form text. When a user hovers their mouse over the abbreviation, the full text appears as a small tooltip.
Note: Always include the title attribute to spell out the abbreviation for your visitors.
Warning: Mobile users cannot hover, so ensure the abbreviation is explained in plain text if it is critical to understand.
Example: Defining Abbreviations with abbr
<p>The <abbr title="HyperText Markup Language">HTML</abbr> standard defines web page structure.</p>Creative Work Citations with cite
The cite tag is used to identify the title of a creative work, such as a book, a song, a movie, or a specific software tool. The browser automatically displays the text inside a cite tag in italics.
Note: Use the cite element specifically for titles of works, not for the name of the author.
Warning: Do not confuse the cite tag with the cite attribute used inside blockquotes.
Example: Creative Work Citations with cite
<p>My favorite book is <cite>The Great Gatsby</cite>.</p>Text Direction Overrides with bdo
The bdo (Bi-Directional Override) tag allows you to manually reverse the text direction. It is incredibly useful for supporting right-to-left languages (like Arabic or Hebrew) or creating quick visual text effects.
Note: Always specify the dir attribute inside a bdo tag to control the direction.
Warning: Do not use bdo on large text layouts as it makes content unreadable and confuses search engines.
Example: Text Direction Overrides with bdo
<bdo dir="rtl">This text will be displayed right-to-left.</bdo>The cite Attribute on blockquote
The cite attribute on a blockquote holds the URL of the source the quote came from. It is invisible to readers by default, but it gives browsers, search engines, and some assistive tools a machine-readable link back to the original source.
Note: Always add a cite attribute alongside a visible link to the source in your actual text, since cite alone is not visible to most readers.
Warning: Because cite is invisible by default, relying on it alone without a visible link means most readers will never see where the quote actually came from.
Example: The cite Attribute on blockquote
<blockquote cite="https://example.com/article">
This quote's source URL is stored in the cite attribute,
but it isn't visible to readers.
</blockquote>q vs blockquote: Which to Use
Use the q element for short quotations that flow inline within a sentence or paragraph — browsers automatically add quotation marks around it. Use blockquote for longer quotations that stand apart as their own block, typically a full sentence or more, set visually apart from the surrounding text.
Note: If your quote is short enough to sit inside a normal sentence, reach for q. If it needs its own paragraph, use blockquote instead.
Warning: Manually typing quotation marks around text inside a q element results in doubled-up quote marks, since browsers add their own automatically.
Example: q vs blockquote: Which to Use
<p>He mentioned <q>keep it simple</q> in passing.</p>
<blockquote>
This is a longer quotation that stands apart as its own block,
separated from the surrounding paragraph text.
</blockquote>- Typing manual quotation marks inside a q tag, which displays duplicate quotation marks.
- Misusing the blockquote element strictly to create a visual left margin on standard paragraphs.
- Using the cite tag to format the name of a person rather than the title of a creative work.
- Use blockquote for long indented quotes and the q tag for short inline quotes with auto-generated quotation marks.
- Use abbr with the title attribute to provide tooltips for abbreviations.
- Use the cite tag to define creative titles, and the bdo tag to manually reverse text direction.
All modern browsers have complete, built-in support for quotation and citation elements.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: