Quotation elements in HTML are used when you want to quote, cite, or reference some text.
These elements indicate that the content is taken from another source, or is the opinion of another person.
There are some special tags for this in HTML like <q>, <blockquote>, <cite>, <abbr>, and <address>. Each tag has its own use and importance.
List
- <q> – Defines a short inline quotation
- <blockquote> – Defines a long quotation (block quote)
- <cite> – Defines the title of a creative work (book, website, article)
- <abbr> – Defines an abbreviation or acronym
- <address> – Defines contact information
1. The <q> Tag (Short Quotations)
The <q> tag is used for short quotes that appear inside a line of text. Browsers automatically add quotation marks (“ ”) around the text.
Example:
<p>My teacher always says, <q>Practice makes perfect.</q></p>2. The <blockquote> Tag (Long Quotations)
The <blockquote> tag is used for long quotations or paragraphs taken from another source. It displays the quoted text as a separate indented block on the page.
Example:
<p>Albert Einstein once said:</p>
<blockquote>
Life is like riding a bicycle. To keep your balance, you must keep moving.
</blockquote>3. The <cite> Tag (Citing a Work)
The <cite> tag is used to define the title of a creative work such as a book, article, movie, or website. It usually appears in italic style by default.
Example:
<p>One of the best HTML learning sites is <cite>HTML Online Compiler</cite>.</p>4. The <abbr> Tag (Abbreviations and Acronyms)
The <abbr> tag is used to define an abbreviation or acronym, and the title attribute explains its full form. When you hover your mouse over the text, the full meaning appears as a tooltip.
Example:
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for creating web pages.</p>5. The <address> Tag (Contact Information)
The <address> tag is used to show author’s contact details or website information.Browsers usually display it in italic and automatically add a line break before and after the content.
Example:
<address>
Written by John Doe.<br>
Visit us at: <a href="https://htmlonlinecompiler.net">HTML Online Compiler</a><br>
123 Web Street, Ahmedabad, India
</address>Complete Example — All Quotation Tags Together
<!DOCTYPE html>
<html>
<head>
<title>HTML Quotation Elements Example</title>
</head>
<body>
<h2>HTML Quotation and Citation Example</h2>
<p>My favorite quote is: <q>Learning never exhausts the mind.</q></p>
<blockquote cite="https://www.goodreads.com/quotes">
The purpose of our lives is to be happy.
</blockquote>
<p>Source: <cite>Goodreads Quotes</cite></p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is the foundation of all web pages.</p>
<address>
Written by Jane Smith.<br>
Visit us at <a href="https://htmlonlinecompiler.net/html/">HTML</a><br>
Ahmedabad, India
</address>
</body>
</html>