HTML Quotations
The HTML Quotations and Citation Elements <blockquote>, <q>, <abbr>, <address>, <cite>, and <bdo>Â will be covered in this chapter.
Example
Here is a quote from WWF’s website:
For 60 years, WWF has worked to help people and nature thrive. As the world’s leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
HTML for Quotations
A section that has been quoted from another source is defined by the HTML <blockquote> element.
Most of the time, browsers indent <blockquote> elements.
Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
</blockquote>
HTML for Short Quotations
A brief quotation is defined by the HTML <q> tag.
Quotation marks are typically added by browsers around quotation marks.
Example
<p>WWF's goal is to: <q>Build a life where people live in peace with nature.</q></p>
HTML for Abbreviations
An acronym or abbreviation such as “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM” is defined by the HTML <abbr> tag.
Search engine optimization, translation systems, and browsers can all benefit from the marking of abbreviations.
Tip: When you hover your cursor over an acronym or abbreviation, the description will appear thanks to the global title attribute.
Example
<p>The <abbr title="World Trade Organization">WHO</abbr> was founded in 1995.</p>
HTML for Contact Information
HTML <address> for Contact Information
The email address of the owner or author of a document is specified using the HTML <address> tag.
Email addresses, URLs, phone numbers, physical addresses, social media handles, and other details might be included in the contact details.
Browsers always insert a line break before and after the <address> element, and the content within italicizes by default.
Example
<address>
Written by Richard Doeye.<br>
Visit us at:<br>
Example.com<br>
Box 769, Disneyland<br>
USA
</address>
HTML for Work Title
A creative work’s title (such as that of a book, poem, song, movie, painting, sculpture, etc.) is defined using the HTML <cite> tag.
Note: A work’s title does not correspond to a person’s name.
Typically, the text within the <cite> element appears italicized.
Example
<p><cite>Mona Lisa</cite> by Leonardo da Vinci. Painted in 1519.</p>
HTML for Bi-Directional Override
Bi-Directional Override is referred to as BDO.
The current text orientation can be overridden using the HTML <bdo> tag:
Example
<bdo dir="rtl">This text will be written from left to right</bdo>
Mastering HTML Quotation and Citation Elements for Better Content Formatting
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
quotation
citation
blockquote
q
abbr
address
cite
bdo
quotation marks
abbreviation
acronym
contact information
creative work
bi-directional override
Understanding the Purpose of Quotation and Citation Elements in HTML
html quotation tag, html citation element, html quote formatting, html citation formatting, using quotes in html
The “ Element: Quoting Longer Passages of Text
html blockquote tag, block quote html, block quote formatting, long quote html, quoting in html
The “ Element: Inline Quotations and Short Quotes
html inline quote, short quote html, using q tag in html, quote html tag, inline quotation html
The “ Element: Properly Citing Sources and Attributions
html cite tag, citing sources in html, attribution html, html citation format, referencing in html
Best Practices for Using Quotation and Citation Elements Effectively
html quote formatting best practices, proper html citation, quoting guidelines html, citation styles html, optimizing quotes in html
Elevate Your Content with Proper Quotation and Citation Markup
💡 Tip: To write SEO-friendly long-form content, select each section heading along with keywords and use the “Paragraph” option from the floating menu. More descriptive the headings with keywords, the better.
