SmartCodingTips

Quote & Citation in HTML

HTML provides tags to display quotations and references in a way that is both semantically correct and visually appropriate. These tags help identify quoted material and cited sources clearly.

Blockquote Tag

Use the <blockquote> tag for long quotations. It usually indents the quoted text. 


<blockquote>
    The greatest glory in living lies not in never falling, but in rising every time we fall.
</blockquote>

Blockquotes can also include a cite attribute to reference the source URL.

Quote Tag

Use the <q> tag for short inline quotes. Browsers typically surround the text with quotation marks. 


<p>Steve Jobs once said, <q>Innovation distinguishes between a leader and a follower.</q></p>

Cite Tag

The <cite> tag is used to reference the title of a work or source, such as a book, website, or article. 


<p>Read more in <cite>The Art of War</cite> by Sun Tzu.</p>

Best Practices

  • Use <blockquote> for long quotations.
  • Use <q> for short, inline quotes.
  • Use <cite> to credit sources properly.
  • Always provide context or attribution when quoting someone.

Conclusion

Using quote and citation tags improves clarity, structure, and accessibility. These semantic elements help convey meaning and source attribution effectively in your HTML content.