HTML Tutorial: HTML Quotations
Learn blockquotes, inline quotes, cite attribute, and proper quotation usage with colorful examples
HTML provides tags to display quotations or quoted text.
Two main tags:
<q>→ Inline quotation<blockquote>→ Block quotation (larger, separate block)
1️⃣ Inline Quotation (q Tag)
INPUT:
<p>
She said <q>Hello World</q> to everyone.
</p>
OUTPUT:
She said
Hello Worldto everyone.
✔️ <q> automatically adds quotation marks
✔️ Used for quotes inside a paragraph
2️⃣ Block Quotation (blockquote Tag)
INPUT:
<blockquote>
HTML is easy to learn and very useful for creating webpages.
</blockquote>
OUTPUT:
HTML is easy to learn and very useful for creating webpages.
✔️ <blockquote>
3️⃣ Using cite Attribute
You can add a cite attribute to show the source of a quote.
INPUT:
<blockquote cite="https://www.example.com">
Learning HTML improves web skills.
</blockquote>
OUTPUT:
Learning HTML improves web skills.
✔️ cite indicates the source URL
✔️ Helpful for referencing and SEO
4️⃣ Nested Quotations
INPUT:
<blockquote>
John said <q>HTML is fun</q> and kept learning.
</blockquote>
OUTPUT:
John saidHTML is funand kept learning.
✔️ q can be nested inside blockquote
✔️ Preserves inline quotes inside block quotes
🎯 Best Practice
- Use
<q>for short inline quotes - Use
<blockquote>for longer blocks - Always cite sources using
citeattribute - Proper quotation improves readability and credibility
🚀 What’s Next?
👉 HTML Comments
Next, you will learn:
- How to add comments in HTML
- Invisible notes for developers
- Proper commenting for clean code
Quotations add clarity and credibility to your content. Use them wisely.
Tags
HTML Tutorial