HTML Quotations
Quotation elements mark words that come from another person or from another source. HTML has elements for short quotes and for long quoted passages.
A short quote
The q element marks a short quote. Browsers usually add quotation marks around it.
<p>She said, <q>Start early.</q></p>A long quote
The blockquote element holds a long passage. The passage stands apart from the main text.
<blockquote>
<p>Learning grows with daily practice.</p>
</blockquote>A short form
The abbr element marks a short form. Its title attribute gives the full form.
<p>The <abbr title="World Health Organization">WHO</abbr> published a report.</p>Contact details and a work title
The address element holds contact details. The cite element names a work.
<address>
Ana Rao<br>
12 River Street
</address>
<p>She wrote <cite>River Days</cite>.</p>Text direction
The bdo element sets display direction. The dir value rtl means right to left.
<p><bdo dir="rtl">Read this line.</bdo></p>Example
<!DOCTYPE html>
<html>
<head>
<title>A Famous Line</title>
</head>
<body>
<h1>A Famous Line</h1>
<blockquote>
<p>Stay curious and keep learning.</p>
</blockquote>
<p>Her motto was <q>Start early.</q></p>
<p>The <abbr title="National Science Board">NSB</abbr> shared the line.</p>
<address>
Ana Rao<br>
12 River Street
</address>
</body>
</html>Key points
- q element: a short quote inside a paragraph
- blockquote element: a long quoted passage on its own
- abbr element: a short form, with its full form in the title attribute
- address element: contact information for a person or organisation
- cite element: the title of a work, like a book or a film
- bdo element: text with its display direction set by the dir attribute
In this example, the heading names the page topic. The blockquote element holds the long quoted line. The q element marks a short quote inside a paragraph. The abbr element gives a short form with its full form in the title attribute. The address element closes the page with contact details.
Note
Only quote words that the source actually used.
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
Which element marks a long quoted passage?