✍️ Text Formatting Tags

Learn how to emphasize and format text in HTML

📚 What are Text Formatting Tags?

📌 Key Concept

Text formatting tags are used to emphasize or highlight specific content. Some have semantic meaning (screen readers interpret them differently), while others are purely visual. Common tags include <strong>, <em>, <b>, <i>, <u>, <s>, <mark>, <small>, <sub>, and <sup>.

Why Use Text Formatting?

  • Emphasis: Highlights important information for readers
  • Semantics: Conveys specific meaning to browsers and screen readers
  • Readability: Makes content easier to scan and understand
  • Accessibility: Helps assistive technologies interpret content properly

Text Formatting Tags Overview

Tag Meaning Semantic Example
<strong> Strong importance. Bold text with meaning. ✓ Yes <strong>important</strong>
<em> Emphasis. Italic text with meaning. ✓ Yes <em>stressed</em>
<b> Bold text. Only visual, no semantic meaning. ✗ No <b>bold</b>
<i> Italic text. Only visual, no semantic meaning. ✗ No <i>italic</i>
<u> Underlined text. Use sparingly. - <u>underlined</u>
<s> Strikethrough. Content no longer accurate. - <s>old price</s>
<mark> Highlighted/marked text ✓ Yes <mark>highlighted</mark>
<small> Smaller text. Fine print. - <small>disclaimer</small>
<sub> Subscript text (below baseline) - <sub>2</sub>
<sup> Superscript text (above baseline) - <sup>2</sup>

💻 Code Examples

📝 Example 1: Strong Tag

For important information:

This is very important information that should be emphasized.

<p>This is <strong>very important</strong> that should be emphasized.</p>

📝 Example 2: Emphasis Tag

For stressed emphasis:

You must read this carefully.

<p>You <em>must</em> read this carefully.</p>

📝 Example 3: Bold vs Strong

Visual vs semantic:

Product name: Amazing Product - Important: Read the manual

<p>Product: <b>Amazing Product</b> - Important: <strong>Read manual</strong></p>

📝 Example 4: Combining Formatting

Mix multiple tags:

This is very important information you need to know.

<p>This is <strong><em>very important</em></strong> information.</p>

📝 Example 5: Marked Text

Highlight important parts:

The most important part is highlighted in yellow for emphasis.

<p>The important part is <mark>highlighted in yellow</mark>.</p>

📝 Example 6: Subscript & Superscript

For formulas and footnotes:

Water formula: H2O and Einstein's E=mc2

<p>H<sub>2</sub>O and E=mc<sup>2</sup></p>

📖 Detailed Tag Explanations

1. <strong> - Strong Importance

This is very important information that should be emphasized.

Screen readers emphasize this. Semantically correct for importance.

2. <em> - Emphasis

You must read this document carefully.

Italicizes text. Screen readers use different tone. Semantic emphasis.

3. <b> - Bold (No Semantic Meaning)

The product name is very popular this year.

Bold for styling only. No semantic meaning (use strong instead).

4. <i> - Italic (No Semantic Meaning)

The book To Kill a Mockingbird was published in 1960.

Italics for styling only. Use for titles, names. No semantic emphasis.

5. <u> - Underline

Please carefully review this information.

Underlines text. Use sparingly (links are usually underlined).

6. <s> - Strikethrough

Original price: $99.99 Now just $49.99!

Strikethrough indicates removed or incorrect content.

7. <mark> - Highlighted Text

The most important part is highlighted in yellow for emphasis.

Background highlight for important text.

8. <small> - Small Text

Regular text. This is smaller text, often used for disclaimers.

Reduces text size. Use for fine print and disclaimers.

9. <sub> - Subscript

Chemical formula: H2O

Lowers text below baseline. Used for chemistry, math.

10. <sup> - Superscript

Exponent example: x2 + y2 = z2

Raises text above baseline. Used for exponents, footnotes.

⚖️ Tag Comparisons

<strong> vs <b> - When to Use Each

<strong> <b>
✓ Use for important text ✓ Use for styling only
✓ Screen readers emphasize ✗ Screen readers ignore
✓ Semantic meaning ✗ No semantic meaning
Example: Warning Example: Product name

<em> vs <i> - When to Use Each

<em> <i>
✓ Use for stressed emphasis ✓ Use for styling only
✓ Screen readers emphasize ✗ Screen readers ignore
✓ Semantic meaning ✗ No semantic meaning
Example: Stress a word Example: Book title

✨ Best Practices

✅ Do's

  • Prefer semantic tags like <strong> and <em>
  • Use <strong> instead of <b> for importance
  • Use <em> for emphasis instead of <i>
  • Combine tags for multiple levels of emphasis: <strong><em>text</em></strong>
  • Use <mark> to highlight search results or key terms
  • Use CSS for styling consistency across multiple formatted texts

❌ Don'ts

  • Don't overuse emphasis - it reduces impact
  • Don't use underline for styling (users confuse with links)
  • Don't use <b> when <strong> is more appropriate
  • Don't use <i> when <em> is more appropriate
  • Don't use <mark> excessively
  • Don't use formatting for layout or spacing purposes

✍️ Practice Assignments

🎯 Assignment 1: Format a Product Description

Easy

Create a product description using proper text formatting tags.

  • Write a description for any product (phone, book, laptop, etc.)
  • Use <strong> for important features
  • Use <em> for special notes or warnings
  • Use <mark> to highlight key benefits
  • Include price with <s> for old price and show new price in <strong>
  • Add a disclaimer text using <small>

🎯 Assignment 2: Science Report with Formulas

Medium

Write a scientific report using subscripts and superscripts.

  • Create a chemistry report with at least 3 chemical formulas using <sub>
  • Include math equations with <sup> (exponents, powers)
  • Use <strong> for important findings
  • Use <em> for methodology steps
  • Format conclusion paragraph with mixed emphasis tags
  • Use <mark> to highlight key results

🎯 Assignment 3: Blog Post with Complete Formatting

Hard

Create a complete blog post demonstrating all text formatting best practices.

  • Write a blog article (500+ words) on any topic you like
  • Use <strong> for key points (NOT <b>)
  • Use <em> for emphasized words (NOT <i>)
  • Use <mark> to highlight important statistics or quotes
  • Avoid using <u> and explain why
  • Include at least one <small> disclaimer or footnote
  • Style everything with CSS classes instead of inline styles

🎓 Key Takeaways

  • Semantic tags (<strong>, <em>) have meaning for screen readers
  • Visual tags (<b>, <i>) are for styling only
  • Always prefer semantic over visual tags when appropriate
  • Combine tags for multiple levels of emphasis
  • Use formatting to enhance readability, not for layout
  • Proper text formatting improves accessibility and SEO