HTML Tutorial: HTML Formatting
Text formatting tags like bold, italic, underline, mark, small, etc. with colorful examples
HTML provides tags to format text for emphasis or style.
Common formatting tags:
<b>→ Bold<strong>→ Strong emphasis<i>→ Italic<em>→ Emphasized text<u>→ Underline<mark>→ Highlight<small>→ Smaller text<del>→ Deleted/strikethrough<ins>→ Inserted text
1️⃣ Bold and Strong
INPUT:
<b>Bold Text</b>
<strong>Strong Text</strong>
OUTPUT:
Bold Text Strong Text
✔️ <b> just makes text bold
✔️ <strong> also bold + indicates importance for SEO
2️⃣ Italic and Emphasis
INPUT:
<i>Italic Text</i>
<em>Emphasized Text</em>
OUTPUT:
Italic Text Emphasized Text
✔️ <i> for visual italics
✔️ <em> indicates semantic emphasis for screen readers
3️⃣ Underline and Highlight
INPUT:
<u>Underlined Text</u>
<mark>Highlighted Text</mark>
OUTPUT:
Underlined Text Highlighted Text
✔️ <u> adds underline
✔️ <mark> highlights text with yellow background
4️⃣ Small Text
INPUT:
<small>This is small text</small>
OUTPUT:
This is small text
✔️ <small> reduces font size
✔️ Useful for footnotes or disclaimers
5️⃣ Deleted and Inserted Text
INPUT:
<del>Old Text</del>
<ins>New Text</ins>
OUTPUT:
Old TextNew Text
✔️ <del> shows deleted text (strikethrough)
✔️ <ins> shows inserted text (underline)
🎯 Best Practice
- Use
<strong>and<em>for semantic importance - Use
<b>and<i>for visual styling - Highlight important text with
<mark> - Use
<small>for secondary info
🚀 What’s Next?
👉 HTML Quotations
Next lesson:
- Blockquotes & inline quotes
- Quotes with cite attribute
- Quotation formatting examples
Text formatting improves readability and highlights important content.