← Back to HTML Course | Chapter 1: Introduction & Basics | Lesson 10 of 11

HTML Quotations

If you are writing a research paper, you cannot just drop quotes into your text without citing the source. You have to format them differently so your readers know they belong to someone else. HTML quotation tags handle this work online. They tell the browser when text is a direct quote from another page. Some quotation elements add indentations, others automatically insert localized quote marks, and some even let you link directly to the source code of the quote.

In this page:

  1. The blockquote Element
  2. Short Inline Quotes with q
  3. Defining Abbreviations with abbr
  4. Creative Work Citations with cite
  5. Text Direction Overrides with bdo
  6. The cite Attribute on blockquote
  7. q vs blockquote: Which to Use
Syntax
markup 
<blockquote cite="url">Quoted block</blockquote>
<q>Inline quote</q>
<abbr title="Full text">Abbr</abbr>

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.
  • Accepted attributes:
  • cite — URL of the source of the quotation
  • Global attributes (id, class, lang) also apply
Warning: Do not use blockquote purely to indent regular text layouts as it breaks screen-reader accessibility rules.

Example: The blockquote Element

markup 
<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.
  • Accepted attributes:
  • cite — URL of the source of the quotation
  • Global attributes (id, class, lang) also apply
Warning: Different browsers might render nested q tags with different quotation styles, so keep your nested quotes simple.

Example: Short Inline Quotes with q

markup 
<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.
  • Accepted attributes:
  • title — the full expansion of the abbreviation
  • Global attributes (id, class, lang) also apply
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

markup 
<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

markup 
<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.
  • Accepted attributes:
  • dir — ltr | rtl (required on bdo)
  • lang — language code such as en or ar
Warning: Do not use bdo on large text layouts as it makes content unreadable and confuses search engines.

Example: Text Direction Overrides with bdo

markup 
<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.
  • Accepted values:
  • cite — a valid URL (absolute or relative) pointing to the source
  • Also valid on q, ins and del
  • Not displayed by browsers; visible attribution needs the cite element
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

markup 
<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

markup 
<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>
Live Example
Related Topics

HTML Formatting · HTML Text Semantics · HTML Styles · HTML Paragraphs

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Typing manual quotation marks inside a q tag, which displays duplicate quotation marks.
  2. Misusing the blockquote element strictly to create a visual left margin on standard paragraphs.
  3. Using the cite tag to format the name of a person rather than the title of a creative work.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson HTML Text Semantics Next Lesson → HTML Favicon

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.