Skip to main content

🙋🏻 HTML Quotation and Citation Elements

HTML quotation and citation elements are used to mark up quotations and citations in a document. They allow you to specify the source of the quoted text and provide additional information about the quoted text.

In this tutorial, you will learn about the following HTML quotation and citation elements:

  • <blockquote>: Block quotation
  • <q>: Inline quotation
  • <cite>: Citation
  • <abbr>: Abbreviation
  • <address>: Contact information

HTML Block Quotation​

HTML block quotation is defined with the <blockquote> tag. The <blockquote> tag is used to define a block of text that is quoted from another source. It is typically displayed with indentation and a line break before and after the quoted text.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Block Quotation Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <blockquote>
      This is a block quotation.
    </blockquote>
  </body>
</html>
http://.../index.html

This is a Heading

This is a block quotation.

In the example above, the <blockquote> tag is used to define a block quotation with the text "This is a block quotation."

HTML Inline Quotation​

HTML inline quotation is defined with the <q> tag. The <q> tag is used to define a short inline quotation. It is typically displayed with quotation marks around the quoted text.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Inline Quotation Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is an <q>inline</q> quotation.</p>
  </body>
</html>
http://.../index.html

This is a Heading

This is an inline quotation.

In the example above, the <q> tag is used to define an inline quotation with the text "inline."

HTML Citation​

HTML citation is defined with the <cite> tag. The <cite> tag is used to define the title of a work, such as a book, article, or other publication. It is typically displayed in italics.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Citation Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a <cite>citation</cite>.</p>
  </body>
</html>
http://.../index.html

This is a Heading

This is a citation.

In the example above, the <cite> tag is used to define a citation with the text "citation."

HTML Abbreviation​

HTML abbreviation is defined with the <abbr> tag. The <abbr> tag is used to define an abbreviation or acronym. It is typically displayed with a dotted underline and a tooltip that shows the full form of the abbreviation when the user hovers over it.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Abbreviation Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is an <abbr title="abbreviation">abbr</abbr>.</p>
  </body>
</html>
http://.../index.html

This is a Heading

This is an abbr.

In the example above, the <abbr> tag is used to define an abbreviation with the text "abbr." The title attribute is used to specify the full form of the abbreviation, which is displayed as a tooltip when the user hovers over the abbreviation.

HTML Address​

HTML address is defined with the <address> tag. The <address> tag is used to define contact information for the author or owner of a document. It is typically displayed in italics.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Address Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <address>
      Written by John Doe.<br>
      Visit us at:<br>
      Example.com
    </address>
  </body>
</html>
http://.../index.html

This is a Heading

Written by John Doe.
Visit us at:
Example.com

In the example above, the <address> tag is used to define contact information with the text "Written by John Doe." and "Visit us at: Example.com."

Conclusion​

You now know how to use HTML quotation and citation elements to mark up quotations and citations in a document. You can use these elements to provide additional information about the quoted text and specify the source of the quoted text. Try using these elements in your HTML documents to enhance the readability and accessibility of your content.