HTML <i> Tag – Italic Text (Visual Only)
📌 Introduction
The <i> tag is used to display text in italic style in HTML.
However, unlike <em>, it does not add meaning or emphasis. It is only used for visual formatting.
🧱 Syntax
<i>Italic text here</i>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>I Tag Example</title>
</head>
<body>
<p>This is normal text.</p>
<p>This is <i>italic text</i> using the i tag.</p>
</body>
</html>
🖥️ Output Explanation
- Normal text appears regular
- Text inside
<i>appears italic - It has no semantic meaning, only style
🎯 When to Use <i>
Use <i> for:
- Foreign words
- Technical terms
- Names of books, movies, or ships
- Styling without importance
Example:
<p>I love the movie <i>Inception</i>.</p>
⚖️ <i> vs <em>
| Tag | Meaning | Use |
|---|---|---|
<i> |
Italic (visual only) | Styling |
<em> |
Emphasis (semantic) | Meaning + importance |
Example:
<p>I am <i>happy</i>.</p>
<p>I am <em>happy</em>.</p>
✔ <i> = just looks italic
✔ <em> = stressed meaning
⚠️ Important Note
Modern HTML suggests:
👉 Use <em> when meaning matters
👉 Use <i> only for styling or special text types
🚫 Common Mistakes
- Using
<i>for emphasis ❌ - Replacing
<em>with<i>❌ - Using it for normal paragraph styling ❌
🎨 Styling <i>
You can customize it:
<i style="color: gray;">Technical term</i>
🧪 Mini Exercise
Create a page with:
- A paragraph about your favorite movie
- Use
<i>for:- Movie name
- Any foreign words or titles