HTML Quotation

HTML provides specific tags to define quotations. These tags help to semantically represent quoted text, making it easier for browsers and other user agents to render and interpret the content correctly. The main tags for quotations in HTML are blockquote, q, and cite.

Blockquote Tag

The <blockquote> tag is used for long quotations that are displayed as a block. This tag typically indents the quoted section from the rest of the content.

Tag	Description	Example
<blockquote>	Defines a block quotation.	Try yourself `<blockquote> This is a block quotation. It is typically used for longer quotes that are set off from the main text. </blockquote>`

Inline Quote Tag

The <q> tag is used for shorter quotations that are included inline with the surrounding text. Browsers typically enclose the text in quotation marks.

Tag	Description	Example
<q>	Defines an inline quotation.	Try yourself `<p>In his famous speech, Martin Luther King Jr. said, <q>I have a dream.</q></p>`

Cite Tag

The <cite> tag is used to define the title of a work, such as a book, a report, a website, or a piece of creative work.

Tag	Description	Example
<cite>	Defines the title of a work.	Try yourself `<p><cite>The Great Gatsby</cite> is a novel written by F. Scott Fitzgerald.</p>`

Using Quotation Tags in HTML

Here is an example that demonstrates how to use various HTML quotation tags:

Example: Combining Blockquote, Q, and Cite Tags

Try yourself

        
            <blockquote cite="https://www.goodreads.com/quotes">
    "The only limit to our realization of tomorrow is our doubts of today."
    <cite>Franklin D. Roosevelt</cite>
</blockquote>
<p>Another example of an inline quote: <q>Do not go where the path may lead, go instead where there is no path and leave a trail.</q> - <cite>Ralph Waldo Emerson</cite></p>

This example shows how to use the <blockquote>, <q>, and <cite> tags together to create a rich quotation experience.

Important Notes

Here are some important notes and best practices when using HTML quotation tags:

Use the <blockquote> tag for long quotations to distinguish them from the rest of the content visually.
The <q> tag is ge-textsuitable for shorter, inline quotations.
Always use the <cite> tag ge-textto reference the source of the quoted material, which adds context and credibility.
Ensure proper nesting of quotation tags to maintain semantic structure and accessibility.

Summary

HTML quotation tags provide a way to semantically represent quoted text on web pages. By using the <blockquote>, <q>, and <cite> tags appropriately, you can enhance the readability and credibility of your content.