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.
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
Styling the <blockquote> Tag
- 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.
