HTML Basics / Phase 3 — Text Formatting / Lesson 9
📝 Phase 3 · Text Formatting 🟢 Beginner MODULE 09

HTML Formatting Tags

⏱️ 20 min read
📖 Theory + Code
🧩 5 Quiz Questions
🏗️ 1 Challenge
Course progress26%
🎯 What you'll learn: The difference between semantic and presentational formatting, how to use <strong>, <em>, <mark>, <del>, <ins>, <sub>, <sup>, <code>, and <kbd> — the right tags for the right job.
Section 1

Semantic vs Presentational Text

HTML has two categories of text formatting tags: semantic tags and presentational tags. Semantic tags carry meaning — they tell browsers, screen readers, and search engines something important about the text. Presentational tags just change how text looks.

Always prefer semantic tags. They improve accessibility (screen readers understand the emphasis), SEO (search engines weight important words), and long-term maintainability (meaning is separate from style).

✅ Semantic (Preferred)

<strong> — this text is important
<em> — this text is emphasized
Meaning is in the HTML itself

⚠️ Presentational (Avoid)

<b> — just makes text bold
<i> — just makes text italic
Only a visual effect, no meaning

💡
Rule of thumb
Ask yourself: "Does this word actually mean something important, or do I just want it to look different?" If meaning — use <strong> or <em>. If just style — use CSS instead.
Section 2

Bold and Importance — <strong> vs <b>

<strong> marks text as semantically important — screen readers may change their tone of voice, and search engines give the word extra weight. <b> simply renders text bold with no semantic meaning attached.

strong-vs-b.html
HTML
<!-- strong = semantically important -->
<p><strong>Warning:</strong> This action cannot be undone.</p>
<p>Always read the <strong>terms and conditions</strong> carefully.</p>

<!-- b = stylistic bold only, no added meaning -->
<p>The product name is <b>AcmePro</b> (just making the brand name bold).</p>

Both render as bold text visually. The difference matters for screen readers, SEO crawlers, and developer meaning. Use <strong> for warnings, critical instructions, or key concepts. Use <b> only for stylistic emphasis with no semantic importance — like a product name in a description.

Section 3

Italic and Emphasis — <em> vs <i>

<em> adds stressed emphasis that changes the meaning of a sentence. The word choice matters — "I never said that" vs "I never said that" mean different things. <i> makes text italic for stylistic reasons: technical terms, foreign words, book titles, or thoughts.

em-vs-i.html
HTML
<!-- em = stressed emphasis that changes meaning -->
<p><em>Please</em> read the instructions carefully.</p>
<p>I <em>never</em> said that was okay.</p>

<!-- i = stylistic italic, no emphasis change -->
<p>The CSS property <i>font-weight</i> controls text thickness.</p>
<p>She whispered, <i>Is anyone there?</i></p>
<p>A <i>schadenfreude</i> moment — a German loanword.</p>
Section 4

Highlighted Text — <mark>

<mark> renders text with a yellow highlight by default — like using a highlighter pen. It semantically means "this text is relevant to the current context." Perfect for search results, important terms, or drawing attention to a keyword.

mark.html
HTML
<!-- Highlighting search results -->
<p>Your search for "Python" found: <mark>Python</mark> is a high-level language.</p>

<!-- Highlighting a key term -->
<p>The most important concept is <mark>semantic HTML</mark>.</p>

<!-- You can style mark with CSS -->
<style>
  mark { background: rgba(239, 68, 68, 0.25); color: inherit; border-radius: 3px; }
</style>
💡
Custom mark styling
You can change the highlight color with CSS: mark { background: rgba(239,68,68,.25); }. The default yellow works well in most cases, but themed sites often restyle it to match their accent color.
Section 5

Small, Deleted, Inserted — <small>, <del>, <ins>

These three tags represent common real-world editing and fine-print patterns:

<small>
Renders smaller text. Used for fine print, copyright notices, legal disclaimers, side comments.
Example: *Terms and conditions apply.
<del>
Strikethrough text — represents deleted/removed content. Common in changelogs, pricing, and edits.
Example: was $99
<ins>
Underlined text — represents inserted/added content. Pairs with del to show before/after changes.
Example: now $49
del + ins together
The most common use: old price struck through, new price underlined. Visual change history.
Price: $99 $49
del-ins-small.html
HTML
<!-- Sale pricing -->
<p>Price was <del>$99</del> now only <ins>$49</ins>!</p>

<!-- Fine print -->
<p><small>*Offer valid while stocks last. See full terms on our website.</small></p>

<!-- Document edit history -->
<p>The event is on <del>Friday</del> <ins>Saturday</ins>.</p>
Section 6

Subscript and Superscript — <sub>, <sup>

<sub> lowers text below the baseline (subscript) — used in chemical formulas, mathematical notation with lower indices. <sup> raises text above the baseline (superscript) — used in exponents, ordinals, and footnote markers.

sub-sup.html
HTML
<!-- Chemical formula: H₂O -->
<p>Water is H<sub>2</sub>O</p>
<p>Carbon dioxide is CO<sub>2</sub></p>

<!-- Math exponent: E=mc² -->
<p>Einstein's famous equation: E = mc<sup>2</sup></p>
<p>Area of a square: A = s<sup>2</sup></p>

<!-- Footnote marker -->
<p>This claim has been verified<sup>1</sup>.</p>

<!-- Ordinals -->
<p>She finished 1<sup>st</sup> in the 21<sup>st</sup> century games.</p>
Section 7

Inline Code & Keyboard Keys — <code>, <kbd>

<code> marks inline code snippets within prose — a variable name, a function call, a command. Browsers render it in a monospace font. <kbd> represents keyboard input — keys the user should press. Both improve readability in technical documentation.

code-kbd.html
HTML
<!-- Inline code in a sentence -->
<p>Use the <code>print()</code> function to output text.</p>
<p>Set the <code>font-size</code> property in your CSS file.</p>

<!-- Keyboard shortcuts -->
<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save the file.</p>
<p>Undo with <kbd>Ctrl</kbd>+<kbd>Z</kbd> or <kbd>Cmd</kbd>+<kbd>Z</kbd> on Mac.</p>

<!-- Style kbd to look like a key -->
<style>
  kbd {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid #555;
    border-radius: 4px;
    font-family: monospace;
    background: #1a1a2e;
  }
</style>
🎹
Difference between <code> and <pre>
<code> is for inline code within a sentence. <pre> is for multi-line code blocks that preserve whitespace and line breaks. For a full code listing, use <pre><code>...</code></pre> together.
🧩 Knowledge Check — Lesson 9
5 questions to test your formatting tag knowledge. Instant feedback on every answer.
1. <strong> is different from <b> because…
2. What does <em> add to text?
3. <mark> is typically used for…
4. Water (H₂O) — which HTML correctly renders the ₂ subscript?
5. <del> represents…
💪
Coding Challenge — Lesson 9
Apply what you learned · Beginner Level
Challenge: Product Listing with Formatting Tags

Write an HTML snippet for a product listing that uses all the formatting tags from this lesson:

• Product name wrapped in <strong>
• Old price in <del>, new price in <ins>
• A superscript footnote marker: <sup>1</sup> after the new price
• A <small> paragraph at the bottom: *Price includes free shipping. See terms.
• Use <mark> to highlight a key feature like "Free Shipping"

Bonus: Add a <kbd> element showing a keyboard shortcut to add the item to the cart.
💡 Show hints if you're stuck
  • Use <p><strong>Product Name</strong></p> for the name
  • Price line: <p>Price: <del>$99</del> <ins>$49</ins><sup>1</sup></p>
  • Feature: <p>Includes <mark>Free Shipping</mark>!</p>
  • Fine print: <p><small>*Price includes free shipping.</small></p>
Finished this lesson?
Mark it complete to track your progress.
🎉

Lesson 9 Complete!

You now know how to use semantic formatting tags properly. Up next: Ordered Lists!

Module 09 of 62Phase 3 — Text Formatting