HTML Quotations

HTML Tutorial

About Lesson

HTML Quotations

In this tutorial, we will learn about quotations in HTML with the help of examples.

Quotation Elements

Quotation elements are used to insert quoted texts in the document/webpage.
The quotation is designed to display quoted text differently from the normal text.

<q> Tag

HTML <q> tag is used to display text inside the quotation marks.
The <q> tag is also known as a short quotation.
The <q> tag have both opening and closing tag.
Browsers usually add quotation marks around the quotation.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Quotation tag</title>
  </head>
  <body>
    <p>This is a simple text</p>
    <q>This is a quoted text</q>
  </body>
</html>

Output

This is a simple text

This is a quoted text

<blockquote> Tag

HTML <blockquote> tag is used to display a section that is quoted from another source.
This tag did not use quotes to display text. The <blockquote> tag changes the alignment to make it unique from others.
The <blockquote> tag is also known as a long quotation.
The <blockquote> tag have both opening and closing tags.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Blockquote Elements</title>
  </head>
  <body>
    <p>This is a simple Paragraph</p>
    <blockquote>This is a quoted text</blockquote>
  </body>
</html>

Output

This is a simple Paragraph

This is a blockquote text

<abbr> Elements

HTML <abbr> tag is used to define abbreviation or an acronym.
The <abbr> tag works as same as <acronym> tag. This tag is the latest version of tag.
The title attribute can be used to shoe the description for the abbreviation or acronym when the user mouse over the element.
The <abbr> tag has both opening and closing tags.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Abbreviation Elements</title>
  </head>
  <body>
    <p><abbr title = "abbreviation/acronym tag">Hover to see
 effect</abbr></p>
  </body>
</html>

Output

Hover to see effect

<address> Elements

HTML <address> tag is used to define address in a document.
This address can be contact information for the author/owner of a document or an article.
The text inside the <address> tag will be emphasized.
The browser will automatically add a line break before and after the <address> element.
The <address> tag has both opening and closing tags.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Address Elements</title>
  </head>
  <body>
    <address>written by James Scott and Manny<br>visit us at:
 Example.com<br>Box 457, Disneyland, US</address>
  </body>
</html>

Output

written by James Scott and Manny
visit us at: Example.com
Box 457, Disneyland, US

<cite> Elements

HTML <cite> tag is used to define the title of a work and emphasizes a text.
This creative work can be a book, song, painting, movie, etc.
Browsers will automatically italicize the text inside <cite> tag.
The <cite> tag has both opening and closing tags.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Cite Elements</title>
  </head>
  <body>
    <p>This Site provide Simple and easier <cite>tutorials to
 learn programming.</cite></p>
  </body>
</html>

Output

This Site provide Simple and easier tutorials to learn programming.

<bdo> Elements

HTML <bdo> tag stands for BiDirectional Override tag.
BiDirectional Override means that the text written from both directions (right to left and left to right).
The <bdo> tag used dir attribute to change the direction of the text.
dir attribute is used two values RTL(right to left) and LTR( left to right).
The <bdo> tag has both opening and closing tags.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML bdo Elements</title>
  </head>
  <body>
    <p>This is a simple paragraph.</p>
    <p><bdo dir = "rtl">This is a simple paragraph using bdo 
tag. </bdo></p>
    <p><bdo dir = "ltr">This is a simple paragraph using 
bdo tag. </bdo></p>
  </body>
</html>

Output

This is a simple paragraph.

This is a simple paragraph using bdo tag.