The <blockquote> tag in HTML is used to denote a section of text that is a quotation from another source. It is typically used for longer quotes or excerpts and is displayed as a block-level element, meaning it creates a distinct block of content separate from the surrounding text. By default, most browsers render <blockquote> text with indentation to set it apart visually from the rest of the content.

Syntax:

<blockquote>
  This is a blockquote. It is used to indicate a quotation from another source.
</blockquote>

Attributes:

1. cite: Provides a URL or reference to the source of the quotation. This attribute is optional but useful for providing context or credit for the quoted material.

   Example:

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

Example:

<blockquote cite="https://www.example.com">
  <p>"The only limit to our realization of tomorrow is our doubts of today."</p>
  <footer>— Franklin D. Roosevelt</footer>
</blockquote>

In this example:

• The blockquote contains a quote attributed to Franklin D. Roosevelt.
• The cite attribute provides a URL where the source of the quote can be found.
• The <footer> element is used to provide additional information about the source or author of the quote, although this is not required.

Use Cases:

1. Long Quotations: For longer quotes or passages that need to be set apart from the rest of the text.
2. Citing Sources: To attribute quotes or excerpts to their original sources using the cite attribute.
3. Formatting Quotes: To provide a visual distinction for quotations, often with indentation or styling provided by default or via CSS.

Styling:

You can style <blockquote> elements using CSS to adjust their appearance. Common styles include changing the indentation, font style, or background color.

Example CSS:

<style>
  blockquote {
    border-left: 4px solid #ccc;
    padding-left: 16px;
    margin: 16px 0;
    font-style: italic;
  }
</style>

In this CSS example:

• border-left adds a vertical line to the left of the blockquote.
• padding-left adds space between the border and the text.
• margin creates space above and below the blockquote.
• font-style italicizes the text to emphasize it as a quotation.

Accessibility and SEO:

• Accessibility: The <blockquote> tag helps assistive technologies and screen readers understand that the enclosed text is a quotation. Using proper semantic tags enhances the experience for users relying on these tools.
• SEO: Proper use of <blockquote> tags can contribute to the semantic structure of a webpage, which can indirectly benefit SEO. Including citations and references improves the credibility of content.