HTML Text Formatting

In HTML, we use special tags to highlight, emphasize, or style specific parts of text. These tags don’t just change how text looks — they also add meaning for search engines and screen readers.

Let’s explore the most useful text formatting tags and when to use each.

🔤 1. Bold Text – <b> and <strong>

<b>This text is bold (visual only)</b>
<strong>This text is strong (important + bold)</strong>
  • ✅ <b> is for visual bolding only
  • ✅ <strong> is semantic — it tells screen readers the text is important

Use: Prefer <strong> when the emphasis has meaning.

🔡 2. Italic Text – <i> and <em>

<i>This text is italic (visual only)</i>
<em>This text is emphasized (semantic italic)</em>
  • ✅ <i> is for styling, like technical terms or foreign words
  • ✅ <em> adds emphasis and is read differently by screen readers

Use: Use <em> to stress meaning, and <i> for names, terms, etc.

🖊️ 3. Underlined Text – <u>

<u>This text is underlined</u>
  • Adds visual underlining
  • Not semantic (no special meaning)
  • ⚠️ Don’t use <u> for links — it confuses users

🔄 4. Strikethrough – <s> and <del>

<s>Outdated price</s>
<del>Removed content</del>
  • <s> = content is no longer relevant
  • <del> = deleted content (e.g., revision history)

🆕 5. Inserted/Added Text – <ins>

<ins>This text was added</ins>

Often used to highlight changes or additions (like in diff tools or version history).

🔎 6. Highlighted Text – <mark>

<mark>This text is highlighted</mark>

Adds a yellow background to text. Useful for search results, notes, or attention-grabbing content.

📝 Example with All Formatting

<p>
  <strong>Important:</strong> Please <em>read carefully</em> before proceeding.<br>
  <mark>Offer valid until Friday!</mark><br>
  <del>$99.99</del> <ins>$79.99</ins>
</p>

⚙️ Other Formatting Tags

TagPurpose
<b>Bold (non-semantic)
<strong>Important content (bold + semantic)
<i>Italic (non-semantic)
<em>Emphasized (italic + semantic)
<u>Underline (visual only)
<s>Strikethrough (irrelevant content)
<del>Deleted content
<ins>Inserted/added content
<mark>Highlighted content

🧪 Try This in Your HTML

<p><strong>Warning:</strong> <em>Don’t forget to save your work!</em></p>
<p>Regular price: <del>$50</del> <ins>$35</ins></p>
<p>Search result: <mark>HTML Text Formatting</mark></p>

📝 Quick Recap

  • Use <strong> and <em> for semantic emphasis
  • Use <b>, <i>, <u> for styling only
  • <del> / <ins> help show revisions
  • <mark> is great for drawing attention

👉 Coming Up Next:

Let’s now explore Abbreviations, Quotations, and Citations — how to properly mark special text with tags like <abbr>, <blockquote>, and <cite>.

📚 Next: HTML Abbr, Quotes, and Cite