-
Hajipur, Bihar, 844101
HTML Quotations
When you write articles, stories, news pieces or informative pages on the web, you often need to include quotations. These can be short statements, long paragraphs, citations, references or even special terms. HTML provides several elements to display quotations clearly and meaningfully. Each of these tags helps readers understand that certain parts of your text come from another source, or represent someone’s spoken or written words.
Quotations improve credibility and clarity. A travel blog may include comments from tourists. A news article may quote a government official. A personal blog may share someone’s thoughts, emotions or opinions. Using the right HTML quotation tags makes your content structured, readable and more professional.
In this chapter, you’ll learn how to use block quotations, inline quotes, citations, abbreviations, addresses and bi-directional text. You’ll also understand when each tag is appropriate and how it affects the meaning of your content.
Why HTML Quotations Are Important
Quotations add authenticity and support your content. They help in:
-
Highlighting spoken words
-
Citing books or articles
-
Sharing customer feedback
-
Referring to external sources
-
Displaying addresses properly
-
Showing foreign-language text or right-to-left text
These tags also help search engines and assistive technologies understand the context. When you use the right quotation element, screen readers can interpret your text more accurately, improving accessibility for users who rely on them.
The <blockquote> Element
The <blockquote> tag is used for long quotations. It displays text as a separate block on the page, usually indented on both sides. This makes the quote stand out clearly from the regular content.
Example:
<blockquote>
Travelling around India teaches you about diverse cultures, local traditions,
unique food habits and the beauty hidden in everyday life. Every city has a
story waiting to be heard.
</blockquote>
You can also mention the source of the quote either below or inside the block using the cite attribute.
With citation:
<blockquote cite="https://example.com/travel-article">
Exploring cities like Jaipur, Bengaluru and Mumbai gives you a fresh look at
modern India.
</blockquote>
The cite attribute doesn’t display anything visually, but it adds metadata for browsers and search engines.
When to use <blockquote>:
-
Quoting a paragraph from an article
-
Adding customer reviews in their original words
-
Sharing a long comment or feedback
-
Including excerpts from journals or books
-
Displaying speeches or statements
The <q> Element (Inline Quotes)
The <q> tag is used for short quotations. Browsers automatically add quotation marks around the text wrapped in <q>.
Example:
<p>Aarohi said, <q>I enjoyed my stay in Delhi last month.</q></p>
You don’t need to type the double quotes manually. The <q> element handles that.
When to use <q>:
-
Short spoken lines
-
Small expressions
-
Customer remarks in a sentence
-
Small parts of written text included inside other content
Short quotes blend with the surrounding sentence, which is why <q> is inline while <blockquote> is block-level.
The <cite> Element
The <cite> tag is for referencing titles of books, articles, movies, reports and other works. It is not meant for a person’s name. Most browsers display cited text in italics.
Example:
<p>The story was inspired by <cite>Voices of India</cite>.</p>
You would use <cite> for:
-
Book titles
-
Article names
-
Movie titles
-
Research papers
-
Reports
-
Document titles
This helps readers know the source material clearly.
The <abbr> Element (Abbreviations)
People use abbreviations in every field. HTML provides the <abbr> tag to define abbreviations and acronyms. You can add a title attribute to show the full form when a user hovers the mouse pointer.
Example:
<p>Aditi works at an <abbr title="Information Technology">IT</abbr> company in Bengaluru.</p>
When someone moves over “IT,” they see the full form as a tooltip.
Useful for:
-
Organisations
-
Technical terms
-
Government bodies
-
Scientific words
-
Common abbreviations
This improves clarity and accessibility.
The <address> Element
The <address> tag represents contact information. It is usually displayed in italics and starts on a new line. It can include postal addresses, email IDs, phone numbers, social media links or author details.
Example:
<address>
Written by Kavya.<br>
Visit her at: 12th Cross Road, Jayanagar,<br>
Bengaluru, Karnataka.<br>
Email: kavya@example.com
</address>
When to use <address>:
-
Author contact information
-
Company address
-
Footer details
-
Signature blocks
-
Contact section on a webpage
Avoid using it for random physical locations. It should specifically be related to contact details.
The <bdo> Element (Bi-Directional Override)
The <bdo> tag is used when you need to force text direction. Normally text flows left to right, but some languages read right to left. If you want to reverse the text direction, you can use <bdo> with the dir attribute.
Example:
<p><bdo dir="rtl">Namaste India</bdo></p>
The text will be displayed in reverse direction. This is rarely used in normal web pages but important when working with multilingual content.
Combining Quotation Elements
Quotations often appear together. For instance, you may have a blog where a writer talks about a quote from a book, and then you want to show the original source. Here’s an example:
<p>
Meera shared a beautiful line from a book. She said,
<q>The author perfectly described the charm of Jaipur.</q>
</p>
<blockquote>
Jaipur is a blend of culture, history and vibrant colors. It captures the
essence of Rajasthan in every corner.
</blockquote>
<p>
This line is from <cite>Colours of Rajasthan</cite>.
</p>
This example uses short quotes, long quotes and citations in one section.
A Complete Practical Example
Here is a sample webpage that combines all quotation elements you learned:
<!DOCTYPE html>
<html>
<head>
<title>Quotation Example</title>
</head>
<body>
<h1>Quotes from Travelers</h1>
<p>
Aarohi said, <q>I loved exploring Marine Drive during my Mumbai trip.</q>
</p>
<blockquote cite="https://example.com/mumbai-travel">
Mumbai is a city that never sleeps. The energy, the people and the coastal
beauty make it one of the most vibrant places in India.
</blockquote>
<p>
This excerpt is taken from <cite>Discovering India</cite>.
</p>
<p>
Meera works in an <abbr title="Information Technology">IT</abbr> firm in
Pune and often travels to different cities for official work.
</p>
<address>
Written by Riya.<br>
Contact: riya@example.com<br>
Pune, Maharashtra
</address>
<p>
Here is reversed text using BDO: <bdo dir="rtl">Hello India</bdo>
</p>
</body>
</html>
This small example helps you see how quotations add personality and structure to a simple webpage.
Practice Task
Create a webpage with the following:
-
A short quote using
<q> -
A long quote using
<blockquote>along with a citation -
Two abbreviations using
<abbr>with tooltips -
One
<address>block for the author or owner of the page -
A
<cite>reference for a book or article -
One line using
<bdo>to reverse text direction
Working with these tags will make you more comfortable with real-world content writing and formatting.
Summary of HTML Quotations
HTML quotation tags help you present spoken words, written sources, abbreviations, addresses and right-to-left text in a meaningful way. You learned how to use <blockquote> for long quotes, <q> for short quotes, <cite> for titles, <abbr> for abbreviations, <address> for contact information and <bdo> for text direction. With these tools, your webpages become more expressive, readable and user-friendly.
Practice Questions
Q1. Use <blockquote> to quote a famous proverb.
Q2. Write a sentence with an inline quote using <q>.
Q3. Cite the book "1984" by George Orwell using <cite>.
Q4. Use <abbr> to show the full form of HTML with a tooltip.
Q5. Provide your contact address using the <address> tag.
Q6. Create a <bdo> tag to display text from right to left.
Q7. Combine <q> and <cite> in one sentence.
Q8. Add an <abbr> for "CSS" with its full form.
Q9. Format a paragraph that ends with a cited book title.
Q10. Use <address> to show email and phone number of a person.
