HTML Quotations and Citations

HTML provides several elements for marking up quotations, citations, abbreviations, and contact information. Using the correct element helps browsers, screen readers, and search engines understand the meaning of your text, not just its appearance.

1) The blockquote Element


<blockquote cite="https://www.w3.org/">
  The World Wide Web (WWW) is an information space where documents
  and other web resources are identified by URLs.
</blockquote>

The <blockquote> element is used for a long quotation taken from another source. Browsers usually indent it. The optional cite attribute holds the URL of the source (it is not displayed, but tools can use it).

Output

The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs.

2) The q Element (Short Inline Quote)


<p>My teacher always says <q>practice makes perfect</q>.</p>

The <q> element is used for a short quotation that flows inline with the surrounding text. Browsers automatically add quotation marks around it, so you should not type your own quote marks.

Output

My teacher always says practice makes perfect.

3) The abbr Element


<p>The <abbr title="HyperText Markup Language">HTML</abbr> standard is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>

The <abbr> element marks up an abbreviation or acronym. The title attribute holds the full description, which most browsers show as a tooltip when you hover over the text.

Output (hover over the underlined text)

The HTML standard is maintained by the W3C.

4) The cite Element


<p><cite>The Pragmatic Programmer</cite> is a classic book on software craftsmanship.</p>

The <cite> element is used to reference the title of a creative work — a book, article, movie, song, or website. Browsers usually render it in italics. It is not the same as <q> or <blockquote>, which are for the quoted text itself.

Output

The Pragmatic Programmer is a classic book on software craftsmanship.

5) The address Element


<address>
  Written by <a href="mailto:info@codingwithsonu.com">Sonu Kumar Pandit</a><br>
  Visit us at:<br>
  Codingwithsonu.com<br>
  India
</address>

The <address> element defines contact information for the author or owner of a document or article. Browsers typically render it in italics.

Output

Written by Sonu Kumar Pandit
Visit us at:
Codingwithsonu.com
India

6) The bdo Element (Bi-Directional Override)


<bdo dir="rtl">This text will be written right to left</bdo>

The <bdo> (Bi-Directional Override) element forces text to be displayed in a direction other than the page default. The dir attribute accepts rtl (right-to-left) or ltr (left-to-right).

Output

This text will be written right to left

Best Practices:

  • Use <blockquote> for longer, block-level quotations and <q> for short, inline ones.
  • Always add a meaningful title to <abbr> so screen readers and tooltips can expand the abbreviation.
  • Use <cite> only for the title of a work, not for the author's name or the quoted text.
  • Place each new piece of contact information inside <address>, separated by <br>.
  • Do not use <bdo> for styling — it is meant for genuinely bidirectional content such as mixed English/Arabic or English/Hebrew text.