HTML Quotation and Citation Elements

HTML Quotation and Citation Elements

In this lesson, we will learn about the HTML elements used for quotations and citations. These elements help to structure the content of a web page and provide meaning to the text.

They are <abbr>, <address>, <bdo> <blockquote>,<cite> and <q>.

What is the <abbr> element?

The <abbr> element is used to define an abbreviation or acronym. It provides a way to indicate that a word or phrase is an abbreviation, and it can also provide the full form of the abbreviation using the title attribute. For example:

<p>
  The <abbr title="Hypertext Markup Language">HTML</abbr> is the standard markup
  language for creating web pages.
</p>

The HTML is the standard markup language for creating web pages.

What is the <address> element?

The <address> element is used to define contact information for the author or owner of a document or section. It is typically used to provide information such as the author’s name, email address, and physical address. The content inside the <address> element is usually displayed in italics.

For example:

<address>
  <p>John Doe</p>
  <p>Email: <a href="mailto:example@email.com">example@email.com</a></p>
  <p>123 Main Street, City, Country</p>
</address>

Email: example@email.com

123 Main Street, City, Country

What is the <bdo> element?

The <bdo> element stands for “bidirectional override.” It is used to override the current text direction of an element. This is useful when you want to display text in a different direction than the surrounding text, such as displaying right-to-left text in a left-to-right context.

For example:

<p>
  The word <bdo dir="rtl">مرحبا</bdo> is displayed in right-to-left direction.
</p>

What is the <blockquote> element?

The <blockquote> element is used to define a section that is quoted from another source. It is typically used to display long quotations or excerpts from other works. The content inside the <blockquote> element is usually indented to indicate that it is a quotation.

For example:

<blockquote>
  <p>"The only limit to our realization of tomorrow is our doubts of today."</p>
  <footer>— Franklin D. Roosevelt</footer>
</blockquote>

“The only limit to our realization of tomorrow is our doubts of today.”

What is the <cite> element?

The <cite> element is used to define the title of a work, such as a book, article, or song. It is typically used to provide a reference to the source of a quotation or to indicate the title of a work being cited. The content inside the <cite> element is usually displayed in italics.

For example:

<p>
  The book <cite>The Great Gatsby</cite> was written by F. Scott Fitzgerald.
</p>

The book The Great Gatsby was written by F. Scott Fitzgerald.

What is the <q> element?

The <q> element is used to define a short inline quotation. It is typically used to display a quotation within a paragraph or sentence. The content inside the <q> element is usually displayed in quotation marks.

For example:

<p>The author said, <q>HTML is the backbone of web development.</q></p>

The author said, HTML is the backbone of web development.

Summary

In this lesson, we learned about the HTML elements used for quotations and citations. These elements help to structure the content of a web page and provide meaning to the text. The elements we covered are:

• <abbr>: Used for abbreviations and acronyms.
• <address>: Used for contact information.
• <bdo>: Used for bidirectional text override.
• <blockquote>: Used for long quotations.
• <cite>: Used for titles of works.
• <q>: Used for short inline quotations.

Questions