HTML Text Formatting

HTML text formatting allows you to style and structure text content on web pages using special tags. You'll learn how to make text bold, italic, highlighted, and add semantic meaning that helps both users and search engines understand your content better.

💡 What You'll Master

Difference between physical and logical formatting tags
Essential formatting tags for text styling
Best practices for accessibility and SEO
Real-world examples and practical usage
Modern HTML5 formatting techniques

What is HTML Text Formatting?

HTML text formatting is the process of applying visual styles and semantic meaning to text content on web pages. It uses special HTML tags to control how text appears and what it represents.

There are two main types of formatting tags:

Physical Tags: Control visual appearance only
Logical Tags: Add semantic meaning and visual styling

Physical Tags vs Logical Tags

🎨 Physical Tags

Physical tags focus only on how text looks without adding meaning.

<b>This text is bold</b>
<i>This text is italic</i>
<u>This text is underlined</u>

Output:
This text is bold
This text is italic
This text is underlined

🧠 Logical Tags

Logical tags provide semantic meaning and help screen readers understand content importance.

<strong>This text is important</strong>
<em>This text is emphasized</em>
<mark>This text is highlighted</mark>

Output:
This text is important
This text is emphasized
This text is highlighted

🎯 Key Difference: Logical tags like  and  are better for accessibility and SEO because they tell screen readers and search engines that the content is important.

Common HTML Formatting Tags

Tag	Description	Type	HTML5
`<b>`	Makes text bold (visual only)	Physical	✅ Yes
`<strong>`	Important text with semantic meaning	Logical	✅ Yes
`<i>`	Makes text italic (visual only)	Physical	✅ Yes
`<em>`	Emphasized text with semantic meaning	Logical	✅ Yes
`<u>`	Underlined text	Physical	✅ Yes
`<small>`	Smaller text size	Physical	✅ Yes
`<mark>`	Highlighted text (yellow background)	Logical	✅ Yes
`<sup>`	Superscript text (above normal line)	Other	✅ Yes
`<sub>`	Subscript text (below normal line)	Other	✅ Yes
`<del>`	Deleted text (strikethrough)	Logical	✅ Yes
`<ins>`	Inserted text (underlined)	Logical	✅ Yes

⚠️ Avoid These Deprecated Tags: Don't use <big>, <strike>, <tt> - they're not supported in HTML5. Use CSS for styling instead.

Practical Examples

1. Bold and Important Text

<p>This is <b>bold text</b> (visual only)</p>
<p>This is <strong>important text</strong> (semantic meaning)</p>

Output:
This is bold text (visual only)
This is important text (semantic meaning)

2. Italic and Emphasis

<p>This is <i>italic text</i> (visual only)</p>
<p>This is <em>emphasized text</em> (semantic meaning)</p>

Output:
This is italic text (visual only)
This is emphasized text (semantic meaning)

3. Highlighting and Marking

<p>The <mark>highlighted text</mark> stands out.</p>
<p>Search results show <mark>matching keywords</mark> highlighted.</p>

Output:
The highlighted text stands out.
Search results show matching keywords highlighted.

4. Superscript and Subscript

<p>Einstein's formula: E = mc<sup>2</sup></p>
<p>Water molecule: H<sub>2</sub>O</p>
<p>Date: 25<sup>th</sup> December</p>

Output:
Einstein's formula: E = mc²
Water molecule: H₂O
Date: 25^th December

5. Deleted and Inserted Text

<p>Price: <del>$100</del> <ins>$80</ins> (20% off!)</p>
<p>Status: <del>Out of stock</del> <ins>Available now</ins></p>

Output:
Price: ~~$100~~ $80 (20% off!)
Status: ~~Out of stock~~ Available now

6. Small Text

<p>Regular text size</p>
<p><small>Fine print and disclaimers are usually smaller</small></p>

Output:
Regular text size
Fine print and disclaimers are usually smaller

Real-World Example: Product Page

<article>
  <h2>iPhone 15 Pro</h2>
  
  <p><strong>Latest model</strong> with <em>advanced features</em></p>
  
  <p>Storage: 128GB <small>(expandable to 1TB)</small></p>
  
  <p>Price: <del>$999</del> <ins><strong>$899</strong></ins></p>
  
  <p><mark>Limited time offer</mark> - Save $100!</p>
  
  <p><small>*Terms and conditions apply</small></p>
</article>

Output:

iPhone 15 Pro

Latest model with advanced features

Storage: 128GB (expandable to 1TB)

Price: ~~$999~~ $899

Limited time offer - Save $100!

*Terms and conditions apply

Best Practices

✅ Do This

Use  for highlighting search terms
Combine tags logically (most specific inside)
Use  for disclaimers and fine print

❌ Don't Do This

Don't use deprecated tags like <big>, <strike>
Don't overuse formatting (makes text hard to read)
Don't use formatting tags just for styling (use CSS instead)
Don't nest identical tags unnecessarily

Combining Formatting Tags

You can combine multiple tags for complex formatting:

<p><strong><em>Very important emphasized text</em></strong></p>

<p>Formula: <strong>H<sub>2</sub>SO<sub>4</sub></strong></p>

<p>Sale: <del><strong>$299</strong></del> <ins><mark>$199</mark></ins></p>

Output:
Very important emphasized text

Formula: H₂SO₄

Sale: ~~$299~~ $199

SEO and Accessibility Benefits

🚀 Why Semantic Tags Matter: Search engines like Google understand that  and  indicate important content, which can help improve your page rankings.

🔍 SEO Benefits

Better content structure helps search engines understand your page
Improved rankings for properly formatted content
Rich snippets may show formatted text in search results

♿ Accessibility Benefits

Screen readers can announce important text differently
Better navigation for users with disabilities
Improved user experience for everyone

Quick Reference Guide

✅ Recommended (HTML5)

 - Important text
 - Emphasized text
 - Highlighted text
 - Fine print
 - Superscript
 - Subscript
<del> - Deleted text
<ins> - Inserted text

⚠️ Use With Caution

 - Bold (no meaning)
 - Italic (no meaning)
 - Underline (confusing)

❌ Deprecated (Don't Use)

<big> - Not supported
<strike> - Use <del>
<tt> - Use CSS

Summary

HTML text formatting is essential for creating professional web pages. Remember these key points:

Choose semantic tags over visual-only tags when possible
Combine tags intelligently to create complex formatting
Think about accessibility and SEO when formatting text
Use formatting sparingly - too much makes content hard to read
Stay current with HTML5 standards and avoid deprecated tags

HTML