HTML <small> Tag – Smaller Text
📌 Introduction
The <small> tag is used to display smaller text in HTML.
It is mainly used for:
- Side notes
- Copyright text
- Disclaimers
- Secondary information
🧱 Syntax
<small>Your small text here</small>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Small Tag Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a normal paragraph.</p>
<small>This is a small note under the text.</small>
</body>
</html>
🖥️ Output Explanation
- Normal text appears standard size
- Text inside
<small>appears smaller - It is often used as secondary or less important information
🎯 When to Use <small>
Use <small> for:
- Copyright text
- Footnotes
- Legal notices
- Extra explanations
Example:
<p>Price: $10</p>
<small>*Taxes not included</small>
⚠️ Important Note
👉 <small> is NOT just for shrinking text
It also indicates less important information
⚖️ <small> vs CSS font-size
| Method | Purpose |
|---|---|
<small> |
Semantic small/secondary text |
CSS (font-size) |
Pure visual resizing |
Example CSS:
<p style="font-size: 12px;">Small text using CSS</p>
🚫 Common Mistakes
- Using
<small>for main content ❌ - Overusing it for styling instead of meaning ❌
- Replacing proper headings with
<small>❌
🎨 Styling <small>
You can still customize it:
<small style="color: gray;">Additional info</small>
🧪 Mini Exercise
Create a page with:
- A product name
- A price
- A
<small>note under it like:- “Delivery not included”
- “Limited offer”