HTML Quotations

❮ Prev Next ❯

Quotations are an important part of written communication, and HTML provides several elements for indicating quotations in a document.

The <blockquote> tag is used to indicate a longer quotation or citation from another source, while the <q> tag is used to indicate a shorter quotation or citation.

Here are some of the most commonly used Quotations tags in HTML:

  • the <blockquote> tag
  • The <q> tag
  • The <abbr> tag
  • The <address> tag
  • The <cite> tag
  • The <bdo> tag

HTML <blockquote> for Quotations

The <blockquote> tag is used to indicate a longer quotation or citation from another source. It's typically indented and formatted differently from the surrounding text to indicate that it's a quote.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <blockquote>The only way to do great work is to love what you do.</blockquote>
        <footer>- Steve Jobs</footer>
      </body>
  </html>

HTML <q> for Short Quotations

The <qe> tag is used to indicate a shorter quotation or citation from another source. It's typically enclosed in quotation marks and formatted inline with the surrounding text.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <p>As Abraham Lincoln once said, <q>Whatever you are, be a good one.</q></p>
      </body>
  </html>

HTML <abbr>for Abbreviations

The <abbr> tag is used to indicate an abbreviation or acronym. It's typically accompanied by a title attribute that provides the full expansion of the abbreviation.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <p>The <abbr title="World Health Organization">WHO</abbr> recommends washing your hands frequently to prevent the spread of disease.</p>
      </body>
  </html>

HTML <address> for Contact Information

The <address> tag is used to indicate contact information for the author or owner of a document. It's typically formatted as a block of text with line breaks and may include the author's name,address,phone number,email.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>Our Office Address</p>
        <address>
          <p>Written by Bilal Mubarak Idris<br />
          <p>Visit us at:<br />
          <p>www.codingkoleji.com<br />
          <p>Box 564, Kaduna State<br />
          <p>Nigeria<br />
        </address>
      </body>
  </html>

HTML <cite> for Work Title

The <cite> tag is used to indicate the title of a work, such as a book, article, or song. It's typically italicized to distinguish it from surrounding text.

The text in the <cite> element usually renders in italic.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <p>The HTML cite element defines the title of a work</p>
      <p>The <cite>Art of War</cite> by Sun Tzu is a classic text on military strategy.</p>
    </body>
</html>

HTML <bdo> for Bi-Directional Override

The <bdo> tag is used to override the text direction of a block of text. It's typically used in conjunction with the dir attribute to specify whether the text should be displayed left-to-right or right-to-left.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <p>This is a normal text</p>
      <p><bdo dir="rtl">This text will be displayed right-to-left.</bdo></p>
    </body>
</html>

Now that you understand the use of Quotations, lets learn how to use Comments in the next chapter.

❮ Prev Next ❯