Learn HTML – Part 12 – blockquote Tag – Quoting External Content

Learn HTML – Part 12 – blockquote Tag – Quoting External Content

The HTML blockquote tag is used to display long quotations from another source.

It is commonly used to highlight quoted text such as famous sayings, references, or citations.


What is the blockquote Tag?

The blockquote tag represents a section of text that is quoted from another source.

Browsers usually display blockquote content with indentation or special styling.


Basic Syntax

<blockquote>
This is a quoted text from another source.
</blockquote>

Example – Quoting a Statement

<blockquote>
The best way to predict the future is to create it.
</blockquote>

Output:

The best way to predict the future is to create it.


Using the cite Attribute

The cite attribute can be used to specify the source of the quotation.

<blockquote cite="https://example.com">
Learning never exhausts the mind.
</blockquote>

This attribute helps identify the origin of the quote.


blockquote vs q – Key Difference

TagUsageDisplay
blockquoteLong quotationsDisplayed as a separate block
qShort quotationsDisplayed inline within text

Common Use Cases

  • Quoting famous statements
  • Referencing external sources
  • Displaying testimonials
  • Highlighting citations in articles

Good developers never stop learning.


Common Mistakes Beginners Make

  • Using blockquote only for styling text
  • Forgetting to include the source of the quote
  • Using it for short inline quotes instead of the q tag

Conclusion

The HTML blockquote tag is used to display long quotations from external sources.

It helps structure quoted content properly and improves readability and accessibility.

What’s Next?

Now that you understand the blockquote tag, the next step is learning about the abbr tag, which is used to define abbreviations in HTML.

Next: Learn HTML – Part 13 – abbr Tag – Marking Abbreviations →


Series: Learn HTML Series

Facebook
WhatsApp
Twitter
LinkedIn
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Articles from the Series

learn-html-part-63-complete-html-project-thumbnail
Learn HTML – Part 63 – Complete HTML Project (Build a Web Page)
Learn HTML – Part 63 – Complete HTML Project In this final lesson, we will build a complete HTML webpage...
learn-html-part-62-time-tag-date-time-thumbnail
Learn HTML – Part 62 – time Tag – Date & Time
Learn HTML – Part 62 – time Tag – Date & Time The HTML time tag is used to represent dates and times...
learn-html-part-61-mark-tag-highlight-text-thumbnail
Learn HTML – Part 61 – mark Tag – Highlight Text
Learn HTML – Part 61 – mark Tag – Highlight Text The HTML mark tag is used to highlight text that is...
learn-html-part-60-figcaption-tag-figure-caption-thumbnail
Learn HTML – Part 60 – figcaption Tag – Figure Caption
Learn HTML – Part 60 – figcaption Tag – Figure Caption The HTML figcaption tag is used to define a caption...
learn-html-part-59-figure-tag-media-content-thumbnail
Learn HTML – Part 59 – figure Tag – Media Content
Learn HTML – Part 59 – figure Tag – Media Content The HTML figure tag is used to group media content...
learn-html-part-58-track-tag-video-subtitles-thumbnail
Learn HTML – Part 58 – track Tag – Video Subtitles
Learn HTML – Part 58 – track Tag – Video Subtitles The HTML track tag is used to add subtitles, captions,...
learn-html-part-57-source-tag-media-sources-thumbnail
Learn HTML – Part 57 – source Tag – Media Sources
Learn HTML – Part 57 – source Tag – Media Sources The HTML source tag is used to define multiple media...
learn-html-part-56-picture-tag-responsive-images-thumbnail
Learn HTML – Part 56 – picture Tag – Responsive Images
Learn HTML – Part 56 – picture Tag – Responsive Images The HTML picture tag is used to display responsive...
learn-html-part-55-dialog-tag-modal-dialog-thumbnail
Learn HTML – Part 55 – dialog Tag – Modal Dialog
Learn HTML – Part 55 – dialog Tag – Modal Dialog The HTML dialog tag is used to create modal or popup...
learn-html-part-54-summary-tag-details-caption-thumbnail
Learn HTML – Part 54 – summary Tag – Details Caption
Learn HTML – Part 54 – summary Tag – Details Caption The HTML summary tag is used to define a visible...
Scroll to Top