🎨 HTML Text Formatting Tags

The Key to Adding Style to Web Pages (But We’re Not Mad at CSS)

Imagine a web page…
The code is clean, everything works — but the text feels soulless.
That’s where HTML text formatting tags step onto the stage and say:

“I’m not just text — I have meaning.”

In this article, you’ll find:

• Clear answers to “What does this tag do?”
• Real-world examples of “Where would I actually use this?”
• Warnings like “Don’t do this — you’ll regret it later”

🅱️ <b> vs <strong>

The Bold Text Battle: Appearance or Meaning?

We start with two tags that look the same at first glance but work very differently behind the scenes.

🔹 <b> – Visual Power Only

<p>This product is <b>very durable</b>.</p>

• Makes text bold visually
• Has no semantic meaning
• Used purely to catch the eye

📌 Ideal for menu labels, UI text, or content that needs attention but isn’t critical.

🔹 <strong> – “Pay Attention!” Tag

<p><strong>This action cannot be undone.</strong></p>

• Bold plus meaning
• Screen readers emphasize it
• More valuable for SEO

🧠 Practical tip:
Warnings, important info, critical messages → strong

✨ <i> vs <em>

Italic Text, But With Philosophy

🔹 <i> – Style Without Emotion

<p>This word is <i>Latin</i>.</p>

• Visual italics only
• Foreign words
• Book and movie titles

📖 Commonly used in academic and content-focused websites.

🔹 <em> – Emotional Emphasis

<p>We <em>really</em> need to finish this.</p>

• Adds semantic emphasis
• Screen readers change tone
• Brings emotion into the sentence

🎭 You could call it HTML’s drama queen.

✏️ <u> – Underlined, But Be Careful

<p>This word is <u>especially</u> emphasized.</p>

⚠️ Danger zone:
Underlined text is often mistaken for a link.

👉 Recommendation:

• Avoid unless absolutely necessary
• Prefer other emphasis styles via CSS

🖍️ <mark> – The Highlighter Effect

<p>This information <mark>will be on the exam</mark>.</p>

• Adds a yellow background
• Instantly grabs attention

📌 Common use cases:

• Highlighted search results
• Important notes
• Educational content

🎓 The HTML way of saying: “Look here!”

🔍 <small> – Small Text, Big Purpose

<p>Membership fee: 99₺ <small>(monthly)</small></p>

• Supplementary information
• Footnotes
• Footer text

🧠 Tip:
Small ≠ unimportant
It means secondary information.

❌ <del> and ✅ <ins>

Delete the Past, Insert the New

<p>
  <del>Old version</del>
  <ins>New version</ins>
</p>

• <del> → Deleted content
• <ins> → Inserted content

🛒 Perfect for e-commerce, changelogs, and update notes.

💡 When styled with CSS, the effect doubles.

🧪 <sub> and <sup>

Science, Math, and Tiny Symbols

<p>CO<sub>2</sub> gas</p>
<p>2<sup>3</sup> = 8</p>

• <sub> → Subscript
• <sup> → Superscript

📐 Mathematical formulas
🧬 Chemical equations
📊 Statistical explanations

🧱 Real-World Scenario (Mini Project)

<article>
  <h2><strong>HTML Text Formatting</strong></h2>

  <p>
    This lesson is <em>especially</em>
    for <mark>beginners</mark>.
    <small>(Don’t miss it)</small>
  </p>

  <p>
    <del>Memorize</del>
    <ins>Understand</ins>
  </p>
</article>

🎉 This code is:

• Meaningful
• Readable
• SEO-friendly

🚫 Most Common Mistakes

❌ Making everything bold with <b>
❌ Using visual tags when meaning matters
❌ Highlighting every sentence with <mark>
❌ Trying to style everything with HTML and ignoring CSS

🧠 Golden Rules (Save This)

• HTML → What does it mean?
• CSS → How does it look?
• Meaning needed → semantic tags
• Visual flair needed → styling tags

🎯 Short but Clear Summary