HTML Quotations

Block Quotations

The <blockquote> element represents a section of content quoted from another source. It's a block-level element that typically indents the quoted text. Browsers and screen readers treat blockquote content as quoted material.

Use the cite attribute to provide a URL to the source of the quotation. This doesn't display visually but provides machine-readable attribution. You can also include a citation within the blockquote using the <cite> element or a footer.

Blockquotes can contain multiple paragraphs, headings, lists, or other block-level content. They represent extended quotations, not just single sentences.

<!-- Basic blockquote -->
<blockquote>
  <p>The only way to do great work is to love what you do.</p>
</blockquote>

<!-- Blockquote with cite attribute -->
<blockquote cite="https://www.w3.org/Provider/Style/URI">
  <p>Cool URIs don't change.</p>
</blockquote>

<!-- Blockquote with visible citation -->
<blockquote>
  <p>
    In the beginner's mind there are many possibilities,
    but in the expert's mind there are few.
  </p>
  <footer>— <cite>Zen Mind, Beginner's Mind</cite> by Shunryu Suzuki</footer>
</blockquote>

<!-- Multi-paragraph blockquote -->
<blockquote>
  <p>First paragraph of the quote.</p>
  <p>Second paragraph of the quote.</p>
  <p>— Author Name</p>
</blockquote>

Inline Quotations

The <q> element represents a short inline quotation. Browsers automatically add quotation marks around the content, so don't add them manually. The marks are language-appropriate based on the lang attribute.

Like <blockquote>, the <q> element can have a cite attribute to provide the source URL. Use <q> for short quotes within a paragraph, and <blockquote> for longer, standalone quotations.

The browser handles quotation marks automatically, including nested quotes. Different languages use different quotation mark styles, and the browser will use the correct ones based on the lang attribute.

<!-- Basic inline quote -->
<p>As Benjamin Franklin said, <q>An investment in knowledge pays the best interest.</q></p>

<!-- Quote with cite attribute -->
<p>
  According to the documentation,
  <q cite="https://example.com/docs">this feature is experimental</q>
  and may change.
</p>

<!-- Nested quotes -->
<p>
  She said, <q>He told me <q>I'll be there</q> but he never showed up.</q>
</p>

<!-- Language-specific quotes -->
<p lang="fr">Il a dit, <q>Bonjour!</q></p>  <!-- French quotes -->
<p lang="de">Er sagte, <q>Guten Tag!</q></p>  <!-- German quotes -->

Citations

The <cite> element represents the title of a creative work: book, article, essay, poem, song, film, TV show, game, sculpture, painting, or similar. It does not represent the author or creator, only the title of the work.

By default, <cite> is rendered in italics, following typographic conventions. The element has semantic meaning that helps search engines and assistive technologies identify references to works.

Don't use <cite> for people's names. Use it only for titles of works. For attribution of quotes to people, use plain text or a <footer> element within a <blockquote>.

<!-- Books and written works -->
<p>I'm reading <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
<p>The article <cite>CSS Grid Layout</cite> explains the basics well.</p>

<!-- Films and media -->
<p>My favorite movie is <cite>The Shawshank Redemption</cite>.</p>
<p>The song <cite>Imagine</cite> was written by John Lennon.</p>

<!-- Academic citations -->
<p>
  As discussed in <cite>The Elements of Style</cite>,
  brevity is essential in writing.
</p>

<!-- WRONG: Don't use cite for people -->
<p>According to <cite>Albert Einstein</cite>, ... <!-- WRONG --></p>

<!-- RIGHT: -->
<p>According to Albert Einstein, ...</p>

Abbreviations

The <abbr> element represents an abbreviation or acronym. Use the title attribute to provide the full expansion, which displays as a tooltip on hover and is available to assistive technologies.

The first time you use an abbreviation, consider spelling it out followed by the abbreviation in parentheses, especially for important or uncommon acronyms. On subsequent uses, you can use just the <abbr> element.

Some browsers style abbreviations with a dotted underline by default. You can style them with CSS as needed.

<!-- Basic abbreviation -->
<p>The <abbr title="World Wide Web">WWW</abbr> changed everything.</p>
<p>Use <abbr title="HyperText Markup Language">HTML</abbr> for structure.</p>

<!-- First use with expansion -->
<p>
  The World Health Organization (<abbr title="World Health Organization">WHO</abbr>)
  is a specialized agency of the United Nations.
  The <abbr>WHO</abbr> was established in 1948.
</p>

<!-- Technical abbreviations -->
<p>This <abbr title="Application Programming Interface">API</abbr> is RESTful.</p>
<p>The file size is 5 <abbr title="megabytes">MB</abbr>.</p>

<!-- Styling abbreviations -->
<style>
abbr {
  text-decoration: none;
  border-bottom: 1px dotted #666;
  cursor: help;
}
</style>

Addresses and Contact Information

The <address> element provides contact information for its nearest <article> or <body> ancestor. It typically contains the author's name, email, physical address, or other contact details.

The <address> element is rendered in italics by default. It should not be used for arbitrary postal addresses in content—only for contact information related to the document or article.

Content inside <address> can include links, line breaks, and other inline elements to format contact information appropriately.

<!-- Author contact information -->
<address>
  Written by <a href="mailto:jane@example.com">Jane Doe</a>.<br>
  Visit us at: <a href="http://www.example.com">www.example.com</a>
</address>

<!-- Company contact information -->
<address>
  Acme Corporation<br>
  123 Main Street<br>
  Suite 100<br>
  New York, NY 10001<br>
  Phone: <a href="tel:+12345678900">+1 (234) 567-8900</a>
</address>

<!-- Article author -->
<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
  <address>
    By <a rel="author" href="/authors/john-smith">John Smith</a>
  </address>
</article>

<!-- WRONG: Don't use for content addresses -->
<!-- Use a simple <p> instead -->
<p>
  The event will be held at:<br>
  Convention Center<br>
  456 Event Plaza
</p>