HTML blockquote Tag

The <blockquote> tag in HTML is used to define a section that is quoted from another source. It is typically displayed as an indented block to set it apart from the surrounding content.

The <blockquote> tag should be used for longer quotations that require separation from the main text, while the <q> tag is more appropriate for shorter, inline quotations.
Using the <blockquote> tag enhances the semantic structure of your HTML document, clearly indicating that a section of text is a quotation.
The <blockquote> tag also supports the Global Attributes and Event Attributes in HTML.

HTML

<!DOCTYPE html>
<html>
<body>
    <p>Here is a famous quote:</p>
    <blockquote cite="https://www.geeksforgeeks.org/html/html-blockquote-tag/">
        "The `<blockquote>` tag in HTML is used to define a block of text that
      is a quotation from another source."
    </blockquote>
</body>
</html>

Output:

Here is a famous quote:
                 "The `
                          ` tag in HTML is used to define a block of text that is a quotation from another source."

The <blockquote> tag wraps the quoted text, indicating that it is a block-level quotation.
The cite attribute specifies the source of the quotation, providing a URL for reference.

Syntax:

<blockquote cite="https://www.example.com/">
  This is a blockquote from an external source.
</blockquote>

Attribute:

cite: Specifies the source of the quotation.

Note: The content inside the <blockquote> tag is usually displayed with indentation by default in most browsers.

More Examples of <blockquote> Tag:

Quoting a Paragraph

HTML

<!DOCTYPE html>
<html lang="en">

<body>
  <blockquote cite="www.geeksforgeeks.org">
        GeeksforGeeks:A computer science portal for geeks
    </blockquote>
</body>

</html>

Styling the <blockquote> Tag

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        blockquote {
            border-left: 4px solid #ccc;
            padding-left: 10px;
            margin-left: 20px;
            color: #555;
            font-style: italic;
        }
    </style>
</head>
<body>
    <blockquote>
        "The only limit to our realization of tomorrow is our doubts of today."
    </blockquote>
</body>
</html>

The border-left property adds a left border to the <blockquote>, visually distinguishing it from the rest of the content.
The padding-left and margin-left properties create space between the border and the text, and between the blockquote and the left edge of the container, respectively, enhancing readability.

Best Practices

Use for Long Quotations: Reserve the <blockquote> tag for longer, block-level quotes, while shorter quotes can use the <q> tag.
Cite the Source: Use the cite attribute to provide the URL of the source for the quote, if available.
Proper Nesting: Avoid nesting <blockquote> tags unless you are quoting a block that contains another block quote.
Semantic Usage: Only use <blockquote> for actual quotations, not for styling or indentation.
CSS Styling: Apply CSS for styling (e.g., margins, font styles) instead of relying on the browser's default rendering.
Accessible Context: Ensure the quote is relevant to the surrounding content for accessibility and context clarity.
Include Attribution: Provide visible attribution within the content or via adjacent text if the cite attribute is not used.

Syntax:

Attribute:

More Examples of <blockquote> Tag:

Quoting a Paragraph

Styling the <blockquote> Tag

Best Practices

Explore