<blockquote> Tag in HTML
FREE
Overview
The <blockquote> tag in HTML is an HTML tag pair used to indicate long quotations. The <blockquote> tags should be used for block-level elements. We can make use of the <q> tag for single-line quotations. Let us have a peek into what is <blockquote> tag, its syntax, usage, and its browser support in this article.
Syntax of <blockquote> Tag
The <blockquote> tags are non-selfing tags i.e, it consists of an opening and closing tag. Let us look at the syntax of the blockquote tag.
Attributes (global+event)
The <blockquote> tag takes cite as an attribute. The cite contains the URL of the source from where the information is quoted. The <blockquote> tag supports both global and event attributes.
What is the <blockquote> tag used for?
The <blockquote> tag in HTML lets users highlight a block or a quote from the rest of the content in the webpage by giving an indentation to the block. The <blockquote> tag supports both global and event attributes and has cite as an attribute, which can be used to give the URL of the site or source from where the quote or the content is sourced from. It is not a good practice to use <blockquote> for a single liner, instead one can make use of the <q> tag to quote a single liner.
Note Do not use <blockquote> whenever you need to have an indentation. As <blockquote> gives an indentation to the block, we might think of using it whenever we need to have an indentation. but it is not recommended to use <blockquote> for this purpose.
Examples
Let us look at an example to see how to implement <blockquote> in HTML
Basic Example of HTML blockquote Tag
As you can see, in the above example we have used the blockquote tag to quote a paragraph from the Scaler Topics website. The website link to Scaler Topics is added through the cite attribute.
The output will be as shown below:
Styling <blockquote> tag
We can style the blockquote easily. Let us look at an example to add styling to a blockquote using an internal style.
In the above example, we used a style tag to style our blockquote. We added a background color, changed the text color, and did some formatting. The output is as below.
Browser Support
The <blockquote> tag has wide support from browsers. here is a list of some of the popular browsers and their support for <blockquote>.
| Browser | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| blockquote | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| cite | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Conclusion
- The blockquote tag is used to indicate long quotations.
- The blockquote tag supports both global and event attributes.
- Cite is used as an attribute in the blockquote tag.
- The blockquote tag can be styled normally like other tags.
Related tags
- <cite> tag
- <q> tag
- <figcaption> tag