Text Formatting Elements0%

Text Formatting Elements

Beginner8 min read•Updated: 2026-09-30

Study Materials Cheatsheet

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: `` vs ``

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

1<!-- Visual bold only (Styling) -->
2<p>This is <b>bold text</b>.</p>
3 
4<!-- Important text (Semantic Meaning) -->
5<p><strong>Warning:</strong> Do not touch electric wires with wet hands!</p>

What is the Difference?

 (Bold): Makes the text bold purely for visual style. It does not carry any special extra importance.
 (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  words with a serious, emphasized tone!

Pro Tip

If a word is genuinely important or an alert, always prefer . If it is just for visual styling, use .

2. Italic Text: `` vs ``

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

1<!-- Visual italic only (Styling) -->
2<p>The Latin name for humans is <i>Homo sapiens</i>.</p>
3 
4<!-- Emphasized stress (Semantic Meaning) -->
5<p>I <em>love</em> learning web development!</p>

What is the Difference?

 (Italic): Tilts the text sideways. Used for technical terms, foreign language words, scientific names, or thought phrases.
 (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: `` (The Yellow Highlighter Pen! 🖍️)

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

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

1<p>The capital city of India is <mark>New Delhi</mark>.</p>
2<p>Your exam starts promptly at <mark>09:00 AM</mark>.</p>

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:

1<p>Special Diwali Offer!</p>
2<p>Original Price: <del>₹1,999</del></p>
3<p>Discounted Price: <ins>₹999</ins></p>

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., ₹999).

5. Small Fine Print: ``

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

1<p>MSK Institute of Technology & Coding.</p>
2<p><small>© 2026 MSK Institute. All rights reserved.</small></p>

Where is this used?

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

6. Chemistry Subscripts: `` 🧪

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  tag:

1<!-- Water Formula: H2O -->
2<p>Chemical formula of Water is H<sub>2</sub>O.</p>
3 
4<!-- Carbon Dioxide: CO2 -->
5<p>Plants absorb CO<sub>2</sub> during photosynthesis.</p>
6 
7<!-- Glucose: C6H12O6 -->
8<p>Glucose formula: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

7. Math Superscripts: `` 📐

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  tag:

1<!-- Math Algebra: a2 + b2 -->
2<p>Algebra Formula: (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p>
3 
4<!-- Einstein's Energy Equation: E = mc2 -->
5<p>Einstein's Equation: E = mc<sup>2</sup></p>
6 
7<!-- Ordinal Class/Dates: 10th Class -->
8<p>Aman is a student of 10<sup>th</sup> Class.</p>

Note

Memory Trick to Never Confuse  and : - sub = Submarine (goes down deep under the sea!) 🌊 ➔  is down below. - sup = Superman (flies up high in the sky!) 🦸 ➔  is up above.

8. Underlined Text: ``

The  tag puts a solid line directly underneath text:

1<p>Please <u>sign here</u> with a blue pen.</p>

⚠️ 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  sparingly.

Master Comparison Table: HTML Formatting Tags

Tag	Tag Name	What It Does	Real-Life School Example
`<b>`	Bold	Visually thick text	`<b>Important</b>`
`<strong>`	Strong	High importance / warning alert	`<strong>Danger!</strong>`
`<i>`	Italic	Visually tilted text	`<i>Homo sapiens</i>`
`<em>`	Emphasized	Verbal stress & emotion	`<em>I told you!</em>`
`<mark>`	Mark	Yellow highlighter background	`<mark>Correct Answer</mark>`
`<small>`	Small	Smaller fine print / copyright	`<small>© 2026 MSK</small>`
`<del>`	Delete	Strikethrough line across text	`<del>₹999</del>`
`<ins>`	Insert	Underlines newly added text	`<ins>₹499</ins>`
`<sub>`	Subscript	Lowers text below the baseline	`H<sub>2</sub>O` (Water)
`<sup>`	Superscript	Raises text above the baseline	`x<sup>2</sup>` or `10<sup>th</sup>`
`<u>`	Underline	Puts a line under the text	`<u>Read this</u>`

Common Beginner Mistakes to Avoid

1
⚠️ Forgetting to Close a Formatting Tag:

 <!-- WRONG: The entire page turns yellow! -->
 <p>The answer is <mark>42. Next question...</p>
3 
 <!-- CORRECT -->
 <p>The answer is <mark>42</mark>. Next question...</p>

1
⚠️ Mixing up  and :

Remember: Submarine goes down (H2O), Superman flies up (x2).

1
⚠️ Incorrect Tag Nesting:

Always close the inner tag before closing the outer tag:

1   <!-- CORRECT -->
2   <p>This is <strong><mark>very important</mark></strong> text.</p>

Quick Summary

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

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

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

Question 2

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

Question 3

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

Question 4

What is the semantic difference between  and ?

Question 5

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

Practice Challenge (Try It Yourself)

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

Write: Photosynthesis converts 6CO2 + 6H2O into glucose.
Write: Pythagoras Theorem: a2 + b2 = c2.
Write a special offer on computer books: Book Price: <del>₹500</del> <ins>₹299</ins> only!
Highlight the word: Special Offer.

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

🚀 What's Next?

In the next lesson, we will continue your web development journey with Quotations & Citations (Text Formatting).

👉 Continue to Next Lesson: Quotations & Citations →

Next Lesson

Quotations & Citations

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Paragraphs & Line Breaks	Quotations & Citations

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Quotations & Citations

Text Formatting Elements

Beginner8 min read•Updated: 2026-09-30

Study Materials Cheatsheet

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: `` vs ``

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

1<!-- Visual bold only (Styling) -->
2<p>This is <b>bold text</b>.</p>
3 
4<!-- Important text (Semantic Meaning) -->
5<p><strong>Warning:</strong> Do not touch electric wires with wet hands!</p>

What is the Difference?

 (Bold): Makes the text bold purely for visual style. It does not carry any special extra importance.
 (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  words with a serious, emphasized tone!

Pro Tip

If a word is genuinely important or an alert, always prefer . If it is just for visual styling, use .

2. Italic Text: `` vs ``

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

1<!-- Visual italic only (Styling) -->
2<p>The Latin name for humans is <i>Homo sapiens</i>.</p>
3 
4<!-- Emphasized stress (Semantic Meaning) -->
5<p>I <em>love</em> learning web development!</p>

What is the Difference?

 (Italic): Tilts the text sideways. Used for technical terms, foreign language words, scientific names, or thought phrases.
 (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: `` (The Yellow Highlighter Pen! 🖍️)

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

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

1<p>The capital city of India is <mark>New Delhi</mark>.</p>
2<p>Your exam starts promptly at <mark>09:00 AM</mark>.</p>

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:

1<p>Special Diwali Offer!</p>
2<p>Original Price: <del>₹1,999</del></p>
3<p>Discounted Price: <ins>₹999</ins></p>

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., ₹999).

5. Small Fine Print: ``

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

1<p>MSK Institute of Technology & Coding.</p>
2<p><small>© 2026 MSK Institute. All rights reserved.</small></p>

Where is this used?

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

6. Chemistry Subscripts: `` 🧪

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  tag:

1<!-- Water Formula: H2O -->
2<p>Chemical formula of Water is H<sub>2</sub>O.</p>
3 
4<!-- Carbon Dioxide: CO2 -->
5<p>Plants absorb CO<sub>2</sub> during photosynthesis.</p>
6 
7<!-- Glucose: C6H12O6 -->
8<p>Glucose formula: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

7. Math Superscripts: `` 📐

1<!-- Math Algebra: a2 + b2 -->
2<p>Algebra Formula: (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p>
3 
4<!-- Einstein's Energy Equation: E = mc2 -->
5<p>Einstein's Equation: E = mc<sup>2</sup></p>
6 
7<!-- Ordinal Class/Dates: 10th Class -->
8<p>Aman is a student of 10<sup>th</sup> Class.</p>

Note

8. Underlined Text: ``

The  tag puts a solid line directly underneath text:

1<p>Please <u>sign here</u> with a blue pen.</p>

Master Comparison Table: HTML Formatting Tags

Tag	Tag Name	What It Does	Real-Life School Example
`<b>`	Bold	Visually thick text	`<b>Important</b>`
`<strong>`	Strong	High importance / warning alert	`<strong>Danger!</strong>`
`<i>`	Italic	Visually tilted text	`<i>Homo sapiens</i>`
`<em>`	Emphasized	Verbal stress & emotion	`<em>I told you!</em>`
`<mark>`	Mark	Yellow highlighter background	`<mark>Correct Answer</mark>`
`<small>`	Small	Smaller fine print / copyright	`<small>© 2026 MSK</small>`
`<del>`	Delete	Strikethrough line across text	`<del>₹999</del>`
`<ins>`	Insert	Underlines newly added text	`<ins>₹499</ins>`
`<sub>`	Subscript	Lowers text below the baseline	`H<sub>2</sub>O` (Water)
`<sup>`	Superscript	Raises text above the baseline	`x<sup>2</sup>` or `10<sup>th</sup>`
`<u>`	Underline	Puts a line under the text	`<u>Read this</u>`

Common Beginner Mistakes to Avoid

1
⚠️ Forgetting to Close a Formatting Tag:

 <!-- WRONG: The entire page turns yellow! -->
 <p>The answer is <mark>42. Next question...</p>
3 
 <!-- CORRECT -->
 <p>The answer is <mark>42</mark>. Next question...</p>

1
⚠️ Mixing up  and :

Remember: Submarine goes down (H2O), Superman flies up (x2).

1
⚠️ Incorrect Tag Nesting:

Always close the inner tag before closing the outer tag:

1   <!-- CORRECT -->
2   <p>This is <strong><mark>very important</mark></strong> text.</p>

Quick Summary

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

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

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

Question 2

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

Question 3

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

Question 4

What is the semantic difference between  and ?

Question 5

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

Practice Challenge (Try It Yourself)

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

Write: Photosynthesis converts 6CO2 + 6H2O into glucose.
Write: Pythagoras Theorem: a2 + b2 = c2.
Write a special offer on computer books: Book Price: <del>₹500</del> <ins>₹299</ins> only!
Highlight the word: Special Offer.

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

🚀 What's Next?

In the next lesson, we will continue your web development journey with Quotations & Citations (Text Formatting).

👉 Continue to Next Lesson: Quotations & Citations →

Next Lesson

Quotations & Citations

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Paragraphs & Line Breaks	Quotations & Citations

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

Text Formatting Elements in HTML

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

What is the Difference?

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

What is the Difference?

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

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

How They Display in the Browser:

5. Small Fine Print: <small>

6. Chemistry Subscripts: <sub> 🧪

7. Math Superscripts: <sup> 📐

8. Underlined Text: <u>

Master Comparison Table: HTML Formatting Tags

Common Beginner Mistakes to Avoid

Quick Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Quotations & Citations

Related Lessons

Practice Quiz

Loading Page Content...

Text Formatting Elements in HTML

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

What is the Difference?

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

What is the Difference?

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

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

How They Display in the Browser:

5. Small Fine Print: <small>

6. Chemistry Subscripts: <sub> 🧪

7. Math Superscripts: <sup> 📐

8. Underlined Text: <u>

Master Comparison Table: HTML Formatting Tags

Common Beginner Mistakes to Avoid

Quick Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Quotations & Citations

Related Lessons

Practice Quiz

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

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

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

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

5. Small Fine Print: `<small>`

6. Chemistry Subscripts: `<sub>` 🧪

7. Math Superscripts: `<sup>` 📐

8. Underlined Text: `<u>`

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

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

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

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

5. Small Fine Print: `<small>`

6. Chemistry Subscripts: `<sub>` 🧪

7. Math Superscripts: `<sup>` 📐

8. Underlined Text: `<u>`