HTML5 Quotes

« Previous Lesson

Next Lesson »

HTML5 Quotations

HTML5 Quotations are used to display quotations. We’ll make your hands dirty with different quotation and citation elements like <blockquote> <q> <abbr> <address> <cite> and <undo>.

HTML <blockquote> element for Quotations

HTML tag <blockquote> specifies a portion of our text that is extracted from other source. Browser usually indent the content enclosed in <blockquote>.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Quotations</title>
</head>
<body>
    <p> Here is a quote from WWF website </p>
    <blockquote cite=”https://explore.panda.org/food”>
        We all need to eat. But the way we produce and consume food is putting an impossible strain on the planet, while
        many are still hungry. And with the world’s population set to grow from 7 billion today to more than 9 billion
        by 2050, it’s clear that our food system needs to change – urgently.
    </blockquote>
</body>
</html>

The output of this code will be

HTML5 Quotations

The <q> Element for Short HTMl5 Quotations

The <q> element defines short html5 quotations. Browsers automatically insert quotations around our quotations.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Quotations</title>
</head>
<body>
    <p> FAO agenda is to: <q> make a food system that will create healthy mind and healthy planet </q> </p>
</body>
</html>

The output of this code will be

<abbr> Element for Abbreviations

The <abbr> defines abbreviations or an acronym like WWW, FAO, CDC, PHP, and many more. With the <abbr> element, we can provide useful information to the readers and search engines.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Quotations</title>
</head>
<body>
    <p> HTML <abbr title=”Hypertext Markup Language”> HTML </abbr> was developed in 1991. </p>
</body>
</html>

The output of this code will be

In this code example, the title attribute will display an abbreviation to the user when he mouses over this element.

HTML <address> Element in HTML5 Quotations

We use the <address> element to show the address of a concerned person on our web page. The contact information can be an email address, phone number, home address, or social media account links.

The browser will render the text in <address> tag in an italic font. Moreover, the browser will add a line before and after the content encapsulated in an address element.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Quotations</title>
</head>
<body>
    <address>
        Written by James Gosly <br>
        Meet him at: <br>
        New Delhi, India <br>
    </address>
</body>
</html>

The out of this code will be

HTML <cite> for Work Title

The HTML5 cite element defines the title of anything. It can be poems, books, patterns, scientific research, or anything.

The browser will display the text in <cite> tag in italic format.

Example

<!DOCTYPE html>
<HTML>
<head>
    <title>HTML5 Quotations</title>
</head>
<body>
    <p> Denis Ricthie wrote the book <cite> Introduction to C programming </cite> </p>
</body>
</html>

The output of this code will be

HTML <bdo> Tag for Bi-Directional Override

We can alter the current text direction with the <bdo> tag.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Quotations</title>
</head>
<body>
    <bdo dir=”rtl”> This text will be rendered from right to left. </bdo>
</body>
</html>

To learn more about quotations, read its documentation.

Next Lesson » « Previous Lesson