HTML Quotations Tag

Quotation

In HTML, quotation tags help you mark special types of text like quotes, abbreviations or contact info in a meaningful and sematic way. These tags not only improve how your page looks, but also help with SEO and accessibility.

Common HTML Quotation Tags

Tag	Description
<q>	Short inline quotations
<blockquote>	Long block quotations
<abbr>	Abbreviations with tooltip / full form
<address>	Contact info of author / organization

<blockquote> For Long Quotes
The <blockquote> tag is used when you are quoting a large section of text from another source.
Browsers usually indent it to show it is a special block.

Example:

<!DOCTYPE html>
<html>
 <head>
  <title>Quotation</title>
 </head>
 <body>
  <blockquote>
  <p>"To be or not to be, that is the question."</p>
  <p>- William Shakespeare, Hamlet</p>
  </blockquote>
 </body>
</html>

Output:

NOTE: Ideal for quotes from books, speeches or articles.

<q> For Short Inline Quotes
Use <q> when you want to include a short quote within a paragraph.
Browsers automatically add quotation marks around the text.

Example:

<p>He said <q>Life is like a box of chocolates.</q></p>

Output:

<abbr> For Abbreviations
The <abbr> tag helps explain short forms or acronyms.
When users hover over the abbreviation, the full form appears as a tooltip.

Example:

<p><abbr title="Worl Wide Web">WWW</abbr> is an essential part of the internet.</p>

Output:

<address> For Contact Information
The <address> tag is used to define contact details like the name, email and location of the page author or organization.

Example:

<address>
<p>Contact the author:</p>
<p><a href="mailto:author@example.com">autor@example.com</a></p>
<p>123 Main Street, Cityville</p>
<p>Phone: 123-456-7890</p>
</address>

Output:

NOTE: It is often place at the bottom of a page or article.