Complete Web Designing Course for Beginners

✨ Lesson 1.4 – Text Formatting Tags

🎨 Making Text Attractive and Meaningful Using HTML Formatting Tags

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand text formatting in HTML

✅ Make text bold

✅ Make text italic

✅ Underline text

✅ Highlight text

✅ Create superscript and subscript text

✅ Display deleted and inserted text

✅ Use formatting tags professionally

📖 Introduction

Imagine reading a book where every word looks exactly the same.

Example:

Welcome to NextGen Dev Hub. This course teaches web designing and web development.

It is readable, but important words do not stand out.

Now look at this:

Welcome to NextGen Dev Hub.

This course teaches WEB DESIGNING and WEB DEVELOPMENT.

Now important information is easier to identify.

This is called:

✨ Text Formatting

Text formatting helps make content:

✅ Attractive

✅ Easy to Read

✅ Professional

✅ More Understandable

HTML provides several formatting tags for this purpose.

🎨 What is Text Formatting?

Text formatting means changing the appearance of text.

Examples:

Bold Text
Italic Text
Underlined Text
Highlighted Text
Small Text
Superscript
Subscript

🌟 Why Text Formatting is Important

Imagine a college website.

Without formatting:

Admission Open 2026 Last Date 30 June

With formatting:

Admission Open 2026

Last Date: 30 June

Much easier to understand.

Formatting improves communication.

🔥 Bold Text

Bold text is used to emphasize important information.

HTML Tag:

<b>

Example

<b>Welcome Students</b>

Output

Welcome Students

Real Life Example

<p>
Course Fee: <b>₹999</b>
</p>

Output:

Course Fee: ₹999

🌟 Strong Tag

HTML also provides:

<strong>

This tag also makes text bold.

Example

<strong>Important Notice</strong>

Output:

Important Notice

Difference Between b and strong

b Tag

Makes text bold.

strong Tag

Makes text bold and indicates importance.

Professional Recommendation

Use:

<strong>

for important content.

✍️ Italic Text

Italic text is often used for:

Quotes
Special Terms
Emphasis

Tag:

<i>

Example

<i>Web Designing Course</i>

Output:

Web Designing Course

🌟 Emphasis Tag

HTML also provides:

<em>

Example

<em>Important Concept</em>

Output:

Important Concept

Difference

i

Visual Italic

em

Meaningful Emphasis

Professional Recommendation

Use:

<em>

when emphasizing content.

📏 Underline Text

Used to underline text.

Tag:

<u>

Example

<u>Admission Open</u>

Output:

Admission Open

Real Life Example

<p>
Last Date:
<u>30 June 2026</u>
</p>

🖍️ Highlighted Text

Sometimes we want to highlight important information.

HTML Tag:

<mark>

Example

<mark>Important Announcement</mark>

Output:

Important Announcement

Real Life Example

<p>
New Batch Starts On
<mark>1 July 2026</mark>
</p>

❌ Deleted Text

Used to show removed content.

Tag:

<del>

Example

<del>₹2000</del>

Output:

~~₹2000~~

Real Life Example

<p>
Old Price:
<del>₹2000</del>

New Price:
₹999
</p>

Output:

Old Price: ~~₹2000~~

New Price: ₹999

➕ Inserted Text

Used to indicate newly added content.

Tag:

<ins>

Example

<ins>New Offer Available</ins>

Output:

<ins>New Offer Available</ins>

🔽 Subscript Text

Subscript text appears slightly below the normal line.

Tag:

<sub>

Example

Water Formula:

H<sub>2</sub>O

Output:

H₂O

More Examples

CO<sub>2</sub>

Output:

CO₂

H<sub>2</sub>SO<sub>4</sub>

Output:

H₂SO₄

🔼 Superscript Text

Superscript text appears slightly above the normal line.

Tag:

<sup>

Example

x<sup>2</sup>

Output:

x²

More Examples

10<sup>2</sup>

Output:

10²

a<sup>3</sup>

Output:

a³

🔠 Small Text

Used for less important information.

Tag:

<small>

Example

<small>Terms and Conditions Apply</small>

Output:

Terms and Conditions Apply

💻 Complete Example

<!DOCTYPE html>

<html>

<head>

<title>Text Formatting</title>

</head>

<body>

<h1>Text Formatting Example</h1>

<p>
<b>Bold Text</b>
</p>

<p>
<strong>Strong Text</strong>
</p>

<p>
<i>Italic Text</i>
</p>

<p>
<em>Emphasized Text</em>
</p>

<p>
<u>Underlined Text</u>
</p>

<p>
<mark>Highlighted Text</mark>
</p>

<p>
<del>Old Price ₹2000</del>
</p>

<p>
<ins>New Price ₹999</ins>
</p>

<p>
H<sub>2</sub>O
</p>

<p>
x<sup>2</sup>
</p>

</body>

</html>

🎯 Expected Output

Displays:

✅ Bold Text

✅ Strong Text

✅ Italic Text

✅ Emphasized Text

✅ Underlined Text

✅ Highlighted Text

✅ Deleted Text

✅ Inserted Text

✅ H₂O

✅ x²

🏫 Real World Example

College Admission Notice:

<h1>Admission Notice</h1>

<p>
Admissions for <strong>2026 Session</strong> are now open.
</p>

<p>
Last Date:
<mark>30 June 2026</mark>
</p>

<p>
Old Fee:
<del>₹25000</del>
</p>

<p>
New Fee:
<ins>₹20000</ins>
</p>

This looks professional and easy to understand.

⚠️ Common Beginner Mistakes

Mistake 1

Using Too Much Formatting

Bad:

<b>
<u>
<i>
Everything
</i>
</u>
</b>

Over-formatting reduces readability.

Mistake 2

Using Bold for Entire Paragraph

Bad:

<b>
Entire paragraph here...
</b>

Use bold only for important content.

Mistake 3

Incorrect Closing Tags

Wrong:

<b>Welcome

Correct:

<b>Welcome</b>

🌟 Best Practices

✅ Use Bold for important information.

✅ Use Italics for emphasis.

✅ Use Highlighting sparingly.

✅ Use Superscript for powers.

✅ Use Subscript for chemical formulas.

✅ Avoid excessive formatting.

🏆 Mini Project – Student Information Card

Create:

<!DOCTYPE html>

<html>

<head>

<title>Student Information</title>

</head>

<body>

<h1>Student Profile</h1>

<p>
Name:
<strong>Rahul Kumar</strong>
</p>

<p>
Branch:
<em>Computer Science</em>
</p>

<p>
Semester:
<u>Third Semester</u>
</p>

<p>
Admission Status:
<mark>Active</mark>
</p>

<p>
Water Formula:
H<sub>2</sub>O
</p>

<p>
Math Formula:
x<sup>2</sup>
</p>

</body>

</html>

📝 Practical Activity

Create a webpage containing:

Your Name (Bold)

Your College (Italic)

Your Branch (Underlined)

Your Semester (Highlighted)

H₂O using Subscript

x² using Superscript

Run it in Chrome.

📋 Assignment

Assignment 1.4

Answer the following:

What is text formatting?
Which tag creates bold text?
Which tag creates italic text?
Which tag highlights text?
What is the difference between superscript and subscript?
Write the HTML code for H₂O.
Write the HTML code for x².

🧠 Quiz

Q1. Which tag creates bold text?

A. 

B. 

C. 

D. 

✅ Answer: B

Q2. Which tag highlights text?

A. 

B. 

C. 

D. 

✅ Answer: A

Q3. Which tag creates superscript text?

A. 

B. 

C. 

D. 

✅ Answer: B

Q4. Which tag creates subscript text?

A. 

B. 

C. <ins>

D. <del>

✅ Answer: A

Q5. Which formula correctly displays water?

A. H2O

B. H2O

C. H2O

D. HO2

✅ Answer: C

📌 Lesson Summary

✅ Text formatting improves readability and presentation.

✅  and  create bold text.

✅  and  create italic text.

✅  creates underlined text.

✅  highlights important content.

✅  creates subscript text.

✅  creates superscript text.

✅ Proper formatting helps create professional webpages.