HTML Quotation and Citation Elements: In this chapter, we will go through the
<cite>, and <bdo> HTML elements.
The Quotation element in HTML is used to insert quoted texts in a web page, that is, a bit of text not quite the same as the typical texts on the web page.
Here is a quote from WWF’s website:
For almost 60 years, WWF has been securing the future. The world’s driving conservation association, WWF works in 100 countries and is supported by more than 1,000,000 members in the United States and near 5,000,000 worldwide.
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a segment that is quoted from another source. Browsers typically indent <blockquote> element.
<p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
HTML <q> for Short Quotations
The HTML <q> tag defines a short citation.
Browsers ordinarily embed quotes around the citation.
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
HTML <abbr> for Abbreviations
The HTML <abbr> tag defines abbreviation or an acronym, similar to “HTML”, “CSS”, “Mr.”, “Dr.”, “Quickly”, “ATM”.
Marking abbreviations can give useful data to browsers, translation systems and web search tools.
Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <address> for Contact Information
The HTML <address> tag defines the contact data for the writer/owner of a document or an article.
The contact data can be an email address, URL, Physical address, telephone number, social media handle, and so on
The content in the <address> element normally delivers in italic, and browsers will consistently add a line break before and after the <address> element.
<address> Written by Sohail Khan.<br> Visit us at:<br> Example.com<br> Box 44000, Islamabad<br> Pakistan </address>
HTML <bdo> for Bi-Directional Override
BDO represents Bi-Directional Override.
The HTML <bdo> tag is used to override the current content direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.