Let’s begin with Lecture 6 of the HTML5 & CSS3 series. Making Text Bold, Italic, and Underline in HTML. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Know how to make text bold, italic, and underlined using HTML
- Understand when and why to use each style
- Be able to apply these styles in your own web pages
🧒 Why Style Text?
Sometimes, you want to make certain words stand out on your webpage, like in a storybook or school report.
Think of it like this:
Just like you use different pens (marker, highlighter, pencil) to write, HTML lets you style text so it looks just right!
🔤 The <b> Tag – Make Text Bold
The <b> The tag makes text bold.
Example:
<p>This is <b>very important</b> information!</p>🎯 Output:
This is very important information!
Use <b> When you want to highlight something without changing its meaning.
📝 The <i> Tag – Make Text Italic
The <i> The tag makes text italic.
Example:
<p>I love to read <i>Harry Potter</i> books.</p>🎯 Output:
I love to read Harry Potter books.
Use <i> for book titles, foreign words, or thoughts.
🔗 The <u> Tag – Make Text Underline
The <u> tag underlines text.
Example:
<p>Please read the <u>important rules</u> before continuing.</p>🎯 Output:
Please read the <u>important rules</u> before continuing.
⚠️ Note: Use <u> carefully — people often think underlined text is a link!
💡 When to Use Each One
| Tag | Purpose | Example Use |
|---|---|---|
<b> | Highlight important text | “Remember to <b>save your work</b>!” |
<i> | Show titles, thoughts, or special words | “My favorite movie is <i>Spider-Man</i>” |
<u> | Emphasize with underline | Used rarely, mostly for old-style documents |
💻 Try This: Create a Fun Text Styling Page
Let’s create a new HTML file that shows off bold, italic, and underline styles.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
text-styles.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>Text Styles</title>
</head>
<body>
<h1>Text Styling Fun!</h1>
<p>This is a <b>bold</b> word. It stands out!</p>
<p>This is an <i>italic</i> word. It looks fancy!</p>
<p>This is an <u>underlined</u> word. It's special too!</p>
<h2>My Favorite Things</h2>
<p>I love reading <i>comic books</i>, playing <b>video games</b>, and watching <u>cartoons</u>.</p>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve made a colorful page with styled text!
🧪 Try It Yourself!
- Add a sentence where you use all three styles together.
- Change one of the paragraphs to talk about your favorite food.
- Add a heading
<h3>that says “Important Message” and make it bold. - Try underlining your name inside a paragraph.
🚀 Next Lecture Preview:
In Lecture 7, we’ll learn how to add line breaks using the <br> tag and insert images into our webpages using the <img> tag — bringing your site to life with visuals!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
