HTML Quotations and Citation Elements

We will learn a lot about HTML quotations in this chapter about <q>, <blockquote>, <abbr>, <address>, <cite>,<bdo> , and <define> HTML elements.

Table Of Content-

HTML Quotations and Citation Elements:

Example

Below is a quote taken from the Tesla website:

The Future is Sustainable
We’re building a world powered by solar energy, running on batteries and transported by electric vehicles. Explore the most recent impact of our products, people and supply chain.

HTML <blockquote> for Quotations

When we talk about HTML quotations then, an HTML <blockquote> element indicates that a section comes from another source.

<blockquote> elements are usually indented by browsers.

Example

<!DOCTYPE html> <html> <body><p>Below is a quote taken from the Tesla website:</p><blockquote cite="https://www.tesla.com/about">We're building a world powered by solar energy, running on batteries, and being transported by electric vehicles. Explore the most recent impact of our products, people, and supply chain. </blockquote></body> </html>

HTML Quotations <q> for Short Quotations

An HTML <q> tag defines a short quotation. Quotations are normally surrounded by quotation marks in browsers when it comes to HTML quotations.

Example

<!DOCTYPE html> <html> <body><p>Tesla team says: <q>Using a first-principles approach, we solve some of the world's biggest problems. If you've done exceptional work, join us in tackling the next generation of engineering, manufacturing, and operational challenges. </q> </p></body> </html>

HTML Quotations: HTML <abbr> for Abbreviations

A HTML <abbr> tag indicates an abbreviation or acronym, such as “Java“, “php“, “Mrs.”, “Dr.”, “ASAP”, “ATM”.

Using abbreviations can provide important information to search engines, browsers, and translation systems.

Tip: If you mouse over an abbreviation or acronym, the global title attribute will display its description.

Example

<!DOCTYPE html> <html> <body><p>ASAP stands for<abbr title="Abbreviations">asap</abbr> . </p><p>PHP stands for<abbr title="Hypertext Preprocessor">php</abbr> . </p></body> </html>

HTML <address> for Contact Information

Documents and articles can have a <address> tag to identify their author/owner. It can be an email address, a website URL, a physical address, a phone number, etc as it comes to HTML quotations.

An <address> element’s text is usually rendered in italic, and each line is broken before and after the <address> element.

Example

<!DOCTYPE html> <html> <body><address> US Tesla Stores & Galleries. <br> Glendale AZ-9245 W Glendale Ave <br> 9245 W Glendale Ave <br> Glendale, AZ 85305 <br> Roadside Assistance :(877) 798-3752<br>Service : (602) 337-5554 </address></body> </html>

HTML <cite> for Work Title

This is where a specific segment of HTML syntax is used to indicate how a creative piece of content is defined (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.) in HTML quotations.

Note: It is not the person’s name that determines what a work is titled and Citation <cite> elements usually display text in italics.

Example:

<!DOCTYPE html> <html> <body> <p> <cite>The Avengers </cite> is directed by Joe Russo, Joss Whedon, Anthony Russo in 2012. </p> </body> </html>

Example:

<!DOCTYPE html> <html><body><br><p>Execute<br></p></body></html>

HTML <q> Styling

The styling can be done on the q tag using CSS properties. See example below

Example:

<!DOCTYPE html> <html> <head><style> q{ background-color:yellow; } </style> </head><body> <p>Tesla team says: <q>Using a first-principles approach, we solve some of the world's biggest problems. If you've done exceptional work, join us in tackling the next generation of engineering, manufacturing and operational challenges. </q> </p> </body> </html>

HTML <cite> Styling

The styling can be done on the cite tag using CSS properties in HTML quotations. See example below

Example:

<!DOCTYPE html> <html> <head><style> cite{ color: red; } </style> </head><body> <div> <p> <cite>The Avengers </cite> is directed by Joe Russo, Joss Whedon, Anthony Russo in 2012. </p> <div> </div></div></body> </html>

HTML <bdo> for Bi-Directional Override

Bi-Directional Override is what BDO stands for. The HTML <bdo> tag is used in order to change the direction in which the text is being displayed:

Example

<!DOCTYPE html> <html> <body><bdo dir="rtl">In this example, it will appear from right to left </bdo></body> </html>