HTML provides tags to handle quoted content effectively. Quoted text can appear as inline quotes, block quotes, or even cite a specific source. These tags enhance the readability and semantic meaning of the content by clearly marking quoted text or references.

Syntax of Quotation Tags

Here are the commonly used tags for quotations:

1. Inline Quotes (<q>):

   • Used for short, inline quotations.
   • The browser automatically adds quotation marks around the text.

   <q>Cited text</q>

2. Block Quotes (<blockquote>):

   • Used for long quotations or block-level quotes.
   • Typically, browsers indent block quotes.

   <blockquote>Cited block text</blockquote>

3. Citation (<cite>):

   • Used to indicate the source or title of a work, such as a book, article, or document.

   <cite>Source Title</cite>

4. Abbreviation for Quotes (<abbr>):

   • Used to define abbreviations with a title attribute for full forms.

   <abbr title="World Health Organization">WHO</abbr>

Examples of Quotation Tags

Example 1: Inline Quotes (<q>)

The <q> tag is used for short quotes within a paragraph. The browser automatically adds quotation marks around the content.

Explanation:

• The <q> tag wraps the quoted text, "Hard work pays off".
• The browser renders it with quotation marks automatically.

Example 2: Block Quotes (<blockquote>)

The <blockquote> tag is used for longer quotations. It creates a block-level element, often styled with indentation by default.

Explanation:

• The <blockquote> tag encloses the quote.
• The browser renders it as an indented block of text for better emphasis.

Example 3: Citation (<cite>)

The <cite> tag is used to indicate the source of a quotation or reference a work. It is typically styled in italics by browsers.

Explanation:

• The <cite> tag marks "Franklin D. Roosevelt" as the source of the quote.
• It semantically indicates that this is the name of a person or work.

Example 4: Abbreviations (<abbr>)

The <abbr> tag defines abbreviations and provides their full form using the title attribute.

Explanation:

• The <abbr> tag wraps "WHO" and provides its full form in the title attribute.
• The browser may display the full form as a tooltip when the user hovers over the abbreviation.