Skip to content

Inline Text Formatting 🎨

Prerequisites: Structural Text Elements

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> - [x] <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.

Next Steps