HTML `

` Element: Formatting Block Quotations for Improved Readability

Learn how to use the HTML `

` element to correctly format block quotations in your web pages. This tutorial explains its syntax, the `cite` attribute for specifying sources, and how to customize its appearance using CSS, improving both the accessibility and visual appeal of your content.

---

---

Using the HTML `

` Element to Format Block Quotations

Understanding Block Quotes

The HTML `<blockquote>` element is designed to display a long quotation from another source. This adds semantic meaning to your HTML, making your content easier for both users and machines to understand, and is also important for SEO. Browsers typically render block quotes with indentation, visually setting them apart from the surrounding text. This improves readability. You can customize this appearance using CSS (Cascading Style Sheets).

Using the `

` Element

To create a block quote, simply place the quoted text within the opening and closing `<blockquote>` tags.

Basic Blockquote Example

<blockquote>
  This is a long quotation from another source.
</blockquote>

Copy Code

Adding a Source Citation

The `cite` attribute in the `

` tag specifies the source of the quotation. This improves the credibility of your content and provides context for the reader.

Example with `cite` Attribute

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

Copy Code

Browser Support and Default Styling

The `<blockquote>` element is supported by all major modern browsers. They generally render block quotes with indentation. You can customize this using CSS, for example, removing indentation or changing margins.

Browser	Support
Chrome	Yes
Edge	Yes
Firefox	Yes
Opera	Yes
Safari	Yes

Example: Removing Indentation with CSS

blockquote {
  margin-left: 0; /* Removes left margin */
}

Copy Code

---