<blockquote>
Definition
In HTML, the blockquote
element is used to represent a section of text that is quoted from another source. It is typically displayed as an indented block of text, with the source of the quotation cited using the cite
attribute.
When the blockquote
element is used, the text inside of it is typically displayed in a visually distinct style to set it apart from the surrounding text. This can include indentation, a different font or font color, or even a border or background color.
In addition to the cite
attribute, the blockquote element also supports the lang
attribute, which is used to specify the language of the quoted text. This can be useful for applications that process or analyze the text, as it allows them to accurately identify the language used.
Examples
<blockquote cite="http://example.com/quote-source">
Quoted text goes here.
</blockquote>
Attributes
Attribute | Description | Deprecated |
---|---|---|
cite | Specifies the URL of the source of the quote | No |
Best Practices
The HTML blockquote
element is used to denote a section of text that is quoted from another source. To use the blockquote
element correctly, you should follow these best practices:
- Use the
blockquote
element only for text that is quoted from another source, not for any text that is simply indented or set off from the rest of the text on the page. - If possible, provide a citation for the source of the quoted text, using the
cite
attribute of theblockquote
element. This will make it clear where the quoted text came from and give credit to the original author. - Use the
blockquote
element in conjunction with thep
element to wrap each paragraph of the quoted text. This will ensure that the text is properly formatted and that each paragraph is distinct from the others. - If the quoted text is particularly long, you may want to use the
blockquote
element in combination with theblockquote
element to create nested blockquotes. This will help to visually differentiate the various levels of the quotation and make the text easier to read.
The blockquote
element is a useful tool for quoting text from other sources in your HTML documents. By following these best practices, you can ensure that your use of the blockquote
element is clear, accurate, and well-formatted.
Accessibility Considerations
- Providing the source of the quote using the
cite
attribute, so that users who rely on screen readers can easily identify where the quote came from - Using quotation marks around the quote in the blockquote element, so that users who rely on screen readers can easily distinguish the quote from the surrounding content
- Avoiding using multiple blockquote elements nested inside each other, as this can be confusing for users who rely on screen readers to navigate the page
- Using appropriate styling to distinguish the blockquote from the rest of the content, such as using a different font or background color, to make it easier for users with visual impairments to identify the quote.
Browser Compatibility
Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |