Text Formatting Elements in HTML

Welcome to Chapter 3: Text Formatting! 🎨

Think about how you prepare your School Notebook before an exam:

• You use a bright yellow highlighter to mark important definitions.
• You write main keywords in bold dark ink.
• You write chemistry formulas like H₂O with small numbers at the bottom.
• You write math powers like x² with small numbers at the top.
• When there is a discount on an item, the old price is crossed out like ₹999 ₹499.

In HTML, we have dedicated Text Formatting Tags that allow you to do all of these things on your webpage without writing any CSS!

1. Bold Text: <b> vs <strong>

Both of these tags make text appear bold and thick, but they have different purposes:

What is the Difference?

• <b> (Bold): Makes the text bold purely for visual style. It does not carry any special extra importance.
• <strong> (Strong Importance): Tells the web browser, Google search, and Screen Readers (used by visually impaired people) that this text is critically important. Screen readers will pronounce <strong> words with a serious, emphasized tone!

2. Italic Text: <i> vs <em>

Both tags tilt the text into italics, but just like bold tags, they carry different meanings:

What is the Difference?

• <i> (Italic): Tilts the text sideways. Used for technical terms, foreign language words, scientific names, or thought phrases.
• <em> (Emphasized): Adds verbal stress and emotion to a word. When reading aloud, a screen reader will emphasize the word "love" with voice inflection.

3. Highlighted Text: <mark> (The Yellow Highlighter Pen! 🖍️)

Remember using a fluorescent yellow marker on your school textbook? The <mark> tag does the exact same thing in HTML!

It wraps text with a bright, noticeable yellow highlight background:

Where is this used?

• Highlighting search keywords when a user searches for something on a site.
• Highlighting important exam dates, alerts, or key definitions.

4. Deleted and Inserted Text: <del> and <ins>

These two tags are commonly used together on E-commerce shopping websites (like Amazon or Flipkart) to show product price discounts:

How They Display in the Browser:

• <del> (Deleted): Draws a strike-through line directly across the text (e.g., ₹1,999).
• <ins> (Inserted): Displays the new replacement text with an underline (e.g., <u>₹999</u>).

5. Small Fine Print: <small>

The <small> tag makes text one size smaller than the surrounding normal paragraph text:

Where is this used?

• Copyright notices at the bottom of a website (footer).
• Terms and conditions, disclaimers, or legal fine print.

6. Chemistry Subscripts: <sub> 🧪

Have you ever wondered how to write science formulas like H₂O or CO₂ in HTML?

In chemistry, the small number is placed slightly below the normal text line. This is called a Subscript, and we use the <sub> tag:

7. Math Superscripts: <sup> 📐

In mathematics, powers and exponents (like x² + y²) or ordinal dates (like 10th August) are written slightly above the normal text line. This is called a Superscript, and we use the <sup> tag:

8. Underlined Text: <u>

The <u> tag puts a solid line directly underneath text:

⚠️ Warning for Beginners: On the internet, users expect underlined text to be a clickable link. If you underline normal text, users will keep clicking on it thinking it is a link! Use <u> sparingly.

Master Comparison Table: HTML Formatting Tags

Common Beginner Mistakes to Avoid

1. 1
   ⚠️ Forgetting to Close a Formatting Tag:

1. 1
   ⚠️ Mixing up <sub> and <sup>:

• Remember: Submarine goes down (H<sub>2</sub>O), Superman flies up (x<sup>2</sup>).

1. 1
   ⚠️ Incorrect Tag Nesting:

• Always close the inner tag before closing the outer tag:

Quick Summary

• Use <strong> for critical alerts and <b> for simple bold styling.
• Use <em> for spoken emphasis and <i> for italic terms.
• Use <mark> to highlight words with a bright yellow background.
• Use <del> and <ins> for showing old vs new discounted prices.
• Use <sub> for Chemistry formulas (like H₂O).
• Use <sup> for Math powers (like x²) and ordinals (like 10th).
• Always remember to close every formatting tag you open!

Practice Quiz

Test your understanding with these multiple-choice questions:

1. Which tag is used to write chemical formulas like H₂O where the number sits below the text line?

A. <sup> B. <sub> C. <below> D. <down> Answer: B Explanation: The <sub> (subscript) element lowers text half a line below the normal text baseline, which is ideal for chemical formulas.

2. Which tag gives text a bright yellow background like a highlighter pen?

A. <highlight> B. <yellow> C. <mark> D. <color> Answer: C Explanation: The <mark> tag represents text marked or highlighted for reference purposes, rendering with a yellow background by default.

3. How should you write the mathematical expression x² in HTML?

A. x<pow>2</pow> B. x<sub>2</sub> C. x<sup>2</sup> D. x<up>2</up> Answer: C Explanation: The <sup> (superscript) tag raises text half a line above the normal text baseline, which is standard for exponents and powers.

4. What is the semantic difference between <strong> and <b>?

A. <b> makes text green, <strong> makes text red B. <strong> indicates important text with strong semantic weight (announced strongly by screen readers), while <b> is purely visual bold styling C. <strong> can only be used inside headings D. There is no difference at all Answer: B Explanation: <strong> represents strong importance, seriousness, or urgency semantically, whereas <b> draws attention visually without conveying extra importance.

5. Which tag pair is used to display an old struck-through price and an updated newly inserted price?

A. <old> and <new> B. <cut> and <add> C. <del> and <ins> D. <strike> and <u> Answer: C Explanation: <del> displays deleted/struck-through text, and <ins> displays inserted/underlined replacement text.

Practice Challenge (Try It Yourself)

1. 1
   Open your index.html file in VS Code.
2. 2
   Inside <body>, create a Science & Math Study Sheet:

• Write: Photosynthesis converts 6CO<sub>2</sub> + 6H<sub>2</sub>O into glucose.
• Write: Pythagoras Theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
• Write a special offer on computer books: Book Price: <del>₹500</del> <ins>₹299</ins> only!
• Highlight the word: <mark>Special Offer</mark>.

1. 1
   Save the file (Ctrl + S) and view your clean, formatted study sheet live in your browser! 🚀