HTML Basics
HTML Quotations
HTML has dedicated elements for quoting other sources, naming works, and explaining abbreviations. Using them gives your text proper meaning instead of just visual styling.
What are HTML Quotation Elements?
Quotation elements mark text that comes from another source or refers to a work. Instead of just wrapping a quote in quotation marks, you use tags like <blockquote> and <q> so browsers and assistive tools understand the meaning.
The <blockquote> element is for long, block-level quotations, while <q> is for short, inline quotations and adds quotation marks automatically. Related elements like <cite> and <abbr> add references and explanations.
Basic Usage
<p>She said <q>learning HTML is easy</q> and she was right.</p>
<blockquote>A long quotation goes here, indented as its own block.</blockquote>Example: A Blockquote With a Source
<!DOCTYPE html>
<html>
<body>
<blockquote cite="https://www.w3.org/">
The power of the Web is in its universality. Access by everyone
regardless of disability is an essential aspect.
</blockquote>
<p>— <cite>Tim Berners-Lee</cite></p>
</body>
</html>More Examples
<p>
<abbr title="HyperText Markup Language">HTML</abbr> and
<abbr title="Cascading Style Sheets">CSS</abbr> build web pages.
</p><p>Normal text, then reversed: <bdo dir="rtl">Hello World</bdo></p>Quotation and Reference Elements
| Element | Purpose |
|---|---|
| <blockquote> | A long, block-level quotation. |
| <q> | A short, inline quotation (adds quote marks). |
| <cite> | The title of a referenced work. |
| <abbr> | An abbreviation with a full-form tooltip. |
| <bdo> | Overrides the text direction (bidi override). |
Add a cite attribute with a URL to <blockquote> or <q> to point at the original source. It is not shown on the page but helps machines understand the reference.
Hovering over an <abbr> element shows its title as a tooltip, and screen readers can announce the full form — a small accessibility win.
Key Takeaways
- Use <blockquote> for long quotes and <q> for short inline quotes.
- <q> adds quotation marks automatically.
- <cite> names a work; <abbr> explains an abbreviation.
- The cite attribute records the source URL of a quotation.