Open In App

HTML blockquote Tag

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

Similar Reads