Inline Text Formatting 🎨

Mentor's Note: Think of inline text formatting tags like the tools inside your school pencil case. You have a bold marker to highlight key terms (<strong>), a highlighter pen (<mark>), a red pen to cross things out (<del>), and small notations (<sub>, <sup>). Let's learn how to apply these styles in code! ✏️

📚 Educational Content: This guide covers inline-level formatting elements used to style text segments.

What You'll Learn

By the end of this tutorial, you'll know:

• The difference between semantic (<strong>, <em>) and physical styling (<b>, <i>)
• How to highlight text using <mark>
• How to write math and science formulas using <sub> and <sup>
• How to mark text modifications using <del> and <ins>

---

🌟 The Scenario: The Studied Notes 📝

Mental Model: Highlighting a notebook. Imagine you are reviewing your notes for the board exam:

• The Core Term (<strong>): You write it extra thick with a black pen because it has high importance.
• The Book Title (<em>): You write it in slanted letters (italics) because it's a title.
• The Formula (<sub> and <sup>): You write the "2" slightly lower in $H_2O$ and slightly higher in $x^2$.
• The Correction (<del> and <ins>): You draw a line through a wrong answer and write the corrected word next to it. ✅

---

📖 Inline Formatting Elements

HTML provides two types of formatting tags: Semantic (which tell search engines and screen readers that the text is important) and Physical (which only change visual appearance).

1. Importance: <strong> vs <b>

• <strong> (Semantic): Tells the browser that the text has strong importance. Screen readers read it with emphasis. Renders as bold.
• <b> (Physical): Simply styles the text as bold without adding any semantic importance.

  <p>Please log in with your <strong>password</strong>.</p>
  <p>The name of the dog was <b>Max</b>.</p>

2. Emphasis: <em> vs <i>

• <em> (Semantic): Tells the browser the text has emphasis (e.g., changes the meaning of a sentence depending on which word is emphasized). Renders as italics.
• <i> (Physical): Simply styles the text as italics without semantic meaning (e.g., technical terms, thoughts, book titles).

  <p>You <em>must</em> submit this project today.</p>
  <p>The word <i>algorithm</i> originates from Al-Khwarizmi.</p>

3. Subscript & Superscript

• <sub> (Subscript): Lowers the text baseline (useful for chemical formulas).
• <sup> (Superscript): Raises the text baseline (useful for math exponents and ordinals).

  <p>Water: H<sub>2</sub>O</p>      {/* Renders H2O */}
  <p>Formula: x<sup>2</sup> + y<sup>2</sup></p>  {/* Renders x² + y² */}
  <p>Date: June 6<sup>th</sup></p>  {/* Renders 6th */}

4. Highlighting & Modifications

• <mark>: Highlights text (usually yellow background).
• <del>: Deleted text (strikethrough).
• <ins>: Inserted text (underlined).
• <small>: Reduces font size by one level.

  <p>Today is a <mark>holiday</mark>.</p>
  <p>Price: <del>$50</del> <ins>$39</ins></p>

---

🎨 Visual Logic: Formatting Punctuation

Remember: formatting tags are inline. They do not force line breaks:

<p>The code is <strong>bold</strong> and <em>italic</em>.</p>

Renders inline as:
The code is bold and italic.

---

🧪 Interactive Elements

Try It Yourself

Hands-on Exercise

Task: Write the HTML code to display this sentence with the exact same styles: "Einstein's famous equation is E = mc² where c is the speed of light."

👀 Click to reveal solution

<p>Einstein's famous equation is <strong>E = mc<sup>2</sup></strong> where <em>c</em> is the speed of light.</p>

Quick Quiz

Quick Quiz

Which tag is used to display chemical formulas like CO₂?

• <sup>
• <sub>
• <formula>
• <down>

Explanation: <sub> stands for subscript, which places the enclosed text slightly below the baseline (e.g., CO<sub>2</sub>). <sup> is superscript (above the baseline).

---

📚 Best Practices & Common Mistakes

✅ Best Practices

• Prefer semantic tags (strong, em): Use them instead of b and i to make your site accessible and SEO friendly.
• Nest formatting tags properly: Make sure they close in the correct order:
  • <strong><em>Text</em></strong> (correct).

❌ Common Mistakes ⚠️

• Nesting overlapping tags:
  • Incorrect: <strong><em>Text</strong></em> (overlapping).
• Using <u> for emphasis: The <u> tag (underline) can be confused with hyperlinks. Avoid using it unless indicating spelling errors.

---

💡 Board Focus & Exam Tips 👔

Common Board Questions (GSEB/CBSE/ICSE)

• Q: What is the difference between <strong> and <b> tags in HTML?
• Answer:
  • <strong> is a semantic tag that tells screen readers and search engines that the text is of high importance.
  • <b> is a physical text style tag that simply bolds the text visually without indicating any semantic importance.
• Q: Write the HTML tags used for subscript and superscript.
• Answer: <sub> is used for subscripts, and <sup> is used for superscripts.

---

🔗 Related Topics

• Structural Text Elements — Headings, paragraphs, and text layout
• HTML Entities — Special characters and reserved symbol handling
• HTML Text Formatting Guide — Comprehensive text formatting reference

---