Skip to content
Click Here to get a free report on how to make your website faster
RSS
HTML Blockquote Tag Explained

By

Raqueebuddin Aziz

July 17, 2023

Freelance Web Designer & Developer

HTML Blockquote Tag Explained

You can use the blockquote tag to include quotes in your HTML in a SEO friendly and accessible way. You can also use the cite tag to provide citations for the quote.

Usage

<figure>
	<blockquote>This blog is awesome, Gotta leave an awesome comment</blockquote>
	<figcaption>
		<cite>- Everybody</cite>
	</figcaption>
</figure>
This blog is awesome, Gotta leave an awesome comment
- Everybody

You can also provide a URL for the citation using the cite attribute of the blockquote tag. This will help search engines in indexing your content and linking citations directly.

<figure>
	<blockquote cite="https://raqueebuddinaziz.com/blog/html-blockquote-tag-explained">
		This blog is awesome, Gotta leave an awesome comment
	</blockquote>
</figure>
This blog is awesome, Gotta leave an awesome comment

Note that it has no visual effect, it’s completely a semantic thing to provide a cite URL so that search engines can work better with your content.

Styling

You can style blockquote tags just like any other tag

<figure>
	<blockquote
		style="padding:.75rem; background-color: #ddd; border-radius: 0 .5rem .5rem 0; border-left: 4px solid maroon"
	>
		This blog is awesome, Gotta leave an awesome comment
	</blockquote>
</figure>
This blog is awesome, Gotta leave an awesome comment

Difference b/w blockquote tag and q tag

<figure>
	<blockquote
		style="padding:.75rem; background-color: #ddd; border-radius: 0 .5rem .5rem 0; border-left: 4px solid maroon"
	>
		This blog is awesome, Gotta leave an awesome comment
	</blockquote>
</figure>
<p>Everybody said <q>This blog is the most awesome blog I have ever read</q>.</p>
This blog is awesome, Gotta leave an awesome comment

Everybody said This blog is the most awesome blog I have ever read.

The blockquote tag is used to incorporate large quotes that are not inline with other content, whereas the q tag can be used to include and mark inline quotes.

Benefits of using blockquote tag over other tags for quotes

By using the blockquote tag with the cite attribute or the cite tag gives more semantic meaning to the content on your website which makes it easier for robots like search engines and screen readers to understand your content, which leads to better SEO and Accessibility.

Conclusion

There it is the blockquote tag, it’s a simple one as it has a clearly defined use-case. You want to include a large quote in your website? Then use the blockquote tag.

Leave an awesome comment down below

Tweet Share on LinkedIN Post on Reddit

Looking for a dev to build a MVP for your tech startup?

I can help you out.

Contact

We use cookies to enhance your browsing experience and analyze website traffic. By continuing to use our website, you consent to the use of cookies in accordance with our Privacy Policy.

Privacy Policy