HTML <blockquote> Tag – Block Quotes
📌 Introduction
The <blockquote> tag is used to display a large quotation from another source or text.
It is typically used for:
- Quotes in articles or blogs
- Highlighting important statements
- Referencing external content
Browsers usually indent the content inside <blockquote>.
🧱 Syntax
<blockquote>Your quote here</blockquote>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<h1>Famous Quote</h1>
<blockquote>
The best way to learn HTML is by practicing every day.
</blockquote>
</body>
</html>
🖥️ Output Explanation
- The text inside
<blockquote>appears indented - It is visually separated from normal text
- Helps highlight important content
🎯 When to Use <blockquote>
Use it for:
- Quotes from books or people
- Testimonials
- Highlighted statements
- Blog citations
Example:
<blockquote>
"Code is like humor. When you have to explain it, it’s bad."
</blockquote>
💡 Optional Attribute: cite
You can add a source using cite:
<blockquote cite="https://example.com">
Learning HTML is easy with practice.
</blockquote>
✔ Helps indicate where the quote comes from ✔ Useful for SEO and documentation
⚡ <blockquote> vs <q>
| Tag | Use |
|---|---|
<blockquote> |
Long quotes (block-level) |
<q> |
Short inline quotes |
Example:
<p>He said: <q>Hello world</q></p>
🚫 Common Mistakes
- Using
<blockquote>just for indentation ❌ - Using it for normal text ❌
- Forgetting it is for quotes, not layout ❌
🎨 Styling <blockquote>
You can customize it:
<blockquote style="border-left: 4px solid gray; padding-left: 10px;">
This is a styled quote.
</blockquote>
🧪 Mini Exercise
Create a page with:
- A heading
- A paragraph
- A
<blockquote>containing a motivational quote
👉 Try styling it with a left border