HTML Typography Tutorial: Bold, Italic & Text Styling

Hey friend! 👋

Welcome back to our HTML Basics for Beginners series.

In the last tutorial, you learned how to:

Create an HTML file
Use headings and paragraphs
Build your first webpage 🎉

Nice job! Seriously.

But let’s be honest for a second 😄
Your page probably looked like… just text.
No structure. No flow. No “ahh, this is easy to read” feeling.

Today, we fix that.

This is Part 1 of our Typography series, where you’ll learn the fundamentals of HTML text formatting.

Let’s go 🚀

What You’ll Learn Today

By the end of this HTML Typography tutorial, you’ll know how to:

✅ Make text bold and italic the right way
✅ Combine bold and italic formatting
✅ Underline, highlight, and resize text
✅ Show deleted and updated text
✅ Add line breaks and section dividers
✅ Build a mini project using all these skills

Let’s make your text feel like a real website 🚀

Before You Start the HTML Typography tutorial

Prerequisites:
✅ Completed Tutorial #1 (HTML structure, headings, paragraphs)
✅ A text editor (VS Code, Notepad, etc.)
✅ A web browser (Chrome, Firefox, etc.)

Time to Complete: 15-20 minutes
Difficulty: Beginner-friendly ⭐

Ready? Let’s make your text look professional! 🚀

What Is Typography?

Typography means how text looks and feels.

Think about this:

A WhatsApp message
A newspaper
A blog post
A school textbook

Same language. Same letters.
But very different reading experiences, right?

That difference is typography.

Good typography:

Helps readers understand faster 🧠
Feels clean and friendly
Keeps people on your page

Bad typography:

Looks like a big wall of text 😵
Makes people leave fast

In HTML, typography helps you avoid “big wall of text” nightmares and makes your content actually enjoyable to read.

Quick Reminder: Headings & Paragraphs

You already know:

Headings (<h1>, <h2>, <h3>)
Paragraphs ()

We’re not learning them again.

Today, we’re learning how to use them properly together so your text feels natural and readable.

Bad Text vs Good Text (Very Important)

❌ Bad Example (Don’t Do This)

<h1>My Blog</h1>
<p>I love coding it is very fun and interesting and I want to learn HTML CSS JavaScript and build websites and projects</p>

Why this is bad:

One huge paragraph
No breaks
Hard to read
Overwhelming

✅ Good Example (Much Better!)

<h1>My Blog</h1>

<p>I love coding.</p>

<p>It is fun and interesting.</p>

<p>I want to learn HTML, CSS, and JavaScript to build websites.</p>

Same content.
Much better reading experience.

👉 Golden Rule: One idea = one paragraph.

Step 1: Bold Text — `` vs ``

There are two ways to make text bold in HTML, and they’re not the same!

Just looks Bold: ``

<p>This is <b>bold text</b>.</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

Use  when:

You want text to look bold visually
There’s no special meaning behind it
You’re styling keywords or product names

`Bold AND Important`: ``

<p><strong>This is very important!</strong></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

Use  when:

The text is actually important
You want screen readers & browsers to treat it seriously
The meaning matters, not just the style

💡 Quick Tip:

 = style only (looks bold)
 = meaning (important information)

When in doubt? Use  — it’s better for accessibility.

Practice Challenge 🎯

Write a paragraph about your favorite hobby and use  to highlight the most important point.

Italic Text: `` vs ``

Just like bold, there are two ways to make text italic.

Just italic: ``

<p>This is <i>italic text</i>.</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

Use  for:

Names
Book titles
Thoughts
Technical terms
Foreign words

Emphasis: ``

<p><em>Please read this carefully.</em></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

Use  when:

You want to stress something
The sentence meaning changes with emphasis
You’re adding vocal emphasis

💡 Quick Tip:

 = visual style (titles, names)
 = emphasis (stress, importance)

Example: See the Difference

<p>I <em>really</em> want to learn coding!</p>
<!-- Emphasis on "really" -->

<p>The movie <i>Inception</i> is mind-blowing.</p>
<!-- Title styling -->

Practice Challenge 🎯

Write three sentences: one with a book title, one with emphasis, and one with a movie name.

Step 3: Combining Bold and Italic

You can nest tags to combine formatting!

<p>This is <strong><em>extremely important</em></strong> information!</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — Bold & Italic by Codeboid (@Codeboid) on CodePen.

Result: Text that’s both bold AND italic.

⚠️ Important Rule:

Always close tags in the correct order (like parentheses in math).

❌ Wrong:

<strong><em>Text</strong></em>

✅ Correct:

<strong><em>Text</em></strong>

Think of it like opening and closing boxes — the last one you opened must be the first one you close.

Step 4: Underline, Highlight & Small Text

Underline: ``

<p><u>This text is underlined</u></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

⚠️ Don’t overuse underline. Underlined text often looks like a link, which can confuse readers.

Good use cases:

Highlighting text in documents
Showing corrections
Special formatting in educational content

Highlight Text: ``

<p>This is <mark>very important</mark> information.</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

Looks like a highlighter 🖍️

Great for:

Search results (highlighting keywords)
Important notes in tutorials
Drawing attention to key information

Small Text: ``

<p><small>Terms and conditions apply.</small></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

Used for:

Side notes
Legal text and disclaimers
Copyright notices
Footnotes

Practice Challenge 🎯

Create a product description with a highlighted feature and a small print disclaimer.

Step 5: Deleted & Inserted Text (Showing Changes)

Sometimes, you don’t want to remove text completely.
Instead, you want to show that something was changed, updated, or corrected.

Deleted Text: `<del>`

<p><del>Old price: $100</del></p>

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

What it does:

Shows text with a line through it
Visually means: “This is no longer valid”

When to use `<del>`:

Old prices
Removed information
Content that is no longer correct

💡 Think of <del> as saying:

“This was here before, but it’s not correct anymore.”

Inserted Text: `<ins>`

<p><ins>New price: $80</ins></p>

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

What it does:

Shows new or added text
Usually appears underlined by default

When to use `<ins>`:

Updated information
New content added after a change
Corrections or improvements

💡 Think of <ins> as saying:

“This is the updated version.”

`Using <del>` + `<ins>` Together (Very Common)

<p>
<del>Old price: $100</del><br>
<ins>New price: $80</ins>
</p>

See the Pen Codeboid – HTML Tutorial #2 — + by Codeboid (@Codeboid) on CodePen.

This clearly tells the reader:

What changed
What is correct now

Very useful for:

Product pages (price changes)
Blog updates
Change logs and revision history

Strikethrough Text: `<s>`

<p><s>This offer is no longer available</s></p>

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

Difference between `<s>` and `<del>`:

<s> → visual only (just looks crossed out)
<del> → semantic meaning (content was officially removed/replaced)

💡 Simple rule:

<del> = meaningful change
<s> = just showing something is no longer valid

Practice Challenge 🎯

Create a sale announcement showing the old price crossed out and the new price highlighted.

Step 6: Line Breaks & Section Dividers

Now let’s learn how to control spacing and create visual breaks in your content.

Line Break: ` `

Use   when you want a new line within the same paragraph.

<p>
Roses are red,<br>
Violets are blue,<br>
HTML is easy,<br>
And you know it too 😄
</p>

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

Think of   as Shift + Enter.

When to use  :

✅ Poetry or song lyrics
✅ Addresses
✅ Short lines that belong together

When NOT to use  :

❌ Creating space between paragraphs (use  tags instead)
❌ For layout or design (that’s CSS’s job)
❌ Multiple   for spacing (bad practice!)

Example: Address

<p>
  John Doe<br>
  123 Main Street<br>
  New York, NY 10001<br>
  USA
</p>

Horizontal Line: `<hr>`

Want to separate sections visually?

Use <hr>:

<h2>Section 1</h2>
<p>Content here...</p>

<hr>

<h2>Section 2</h2>
<p>Content here...</p>

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

This adds a horizontal line (divider).

Great for:

New topics
Blog sections
Visual breaks between content
Separating different parts of a page

Simple, but very powerful.

Practice Challenge 🎯

Write a short poem using   for line breaks, then add an <hr> and write a second verse.

Step 7: Mini Project — Product Sale Page

Okay, enough talking.
Let’s combine everything you’ve learned!

Create a file called sale-page.html and write this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flash Sale</title>
</head>
<body>

<h1>🎉 Flash Sale Alert! 🎉</h1>

<p>
  <strong>Limited Time Offer!</strong><br>
  <em>Only 24 hours left</em>
</p>

<hr>

<h2>Featured Product: <i>Ultra Wireless Headphones</i></h2>

<p>
  Experience <mark>crystal-clear sound</mark> with our premium headphones.
</p>

<p>
  <strong>Features:</strong><br>
  <b>30-hour</b> battery life<br>
  <b>Active noise</b> cancellation<br>
  <b>Premium comfort</b> design
</p>

<hr>

<h2>Pricing</h2>

<p>
  <del>Original Price: $199.99</del><br>
  <ins>Sale Price: $129.99</ins>
</p>

<p>
  <strong>Save $70!</strong> That's <mark>35% off</mark>!
</p>

<hr>

<h2>Order Now</h2>

<p>
  Free shipping on orders over $100<br>
  <small>Terms and conditions apply. Sale ends midnight.</small>
</p>

<p>
  Contact us:<br>
  123 Tech Street<br>
  San Francisco, CA 94105<br>
  USA
</p>

<hr>

<footer>
  <p><small>All prices in USD. <s>Previous offers</s> no longer valid.</small></p>
</footer>

</body>
</html>

See the Pen Codeboid – HTML Tutorial #2 — Mini Project by Codeboid (@Codeboid) on CodePen.

Your Turn! 🎯

Customize this page:

Change the product to something you’d sell
Add your own features using  and  
Create a different sale price
Add your own address
Experiment with , , and

👉 Open it in your browser.
If you understand what each part does — you’ve nailed typography! 👏

Typography Cheat Sheet (Part 1)

Quick reference for tags you learned today:

BOLD & ITALIC
<strong>text</strong>    → Bold (important)
<b>text</b>              → Bold (visual only)
<em>text</em>            → Italic (emphasis)
<i>text</i>              → Italic (visual only)
 
HIGHLIGHTING & SPECIAL
<mark>text</mark>        → Highlight
<u>text</u>              → Underline
<small>text</small>      → Small text
 
SHOWING CHANGES
<del>text</del>          → Deleted
<ins>text</ins>          → Inserted
<s>text</s>              → Strikethrough
 
SPACING & DIVIDERS
<br>                     → Line break
<hr>                     → Horizontal line

Quick Recap: What You Learned Today

✅ The difference between  and 
✅ The difference between  and 
✅ How to combine bold and italic
✅ How to highlight text with 
✅ How to show changes with <del> and <ins>
✅ How to add line breaks and dividers
✅ Built a complete sale page project

Great job! 🎉

Common Beginner Mistakes (Totally Normal)

❌ Making everything bold (kills impact)
❌ Using   instead of  for paragraphs
❌ Underlining non-links (confuses readers)
❌ Closing tags in the wrong order

If you’ve done any of these — congrats 🎉
That means you’re learning.

That’s a big upgrade from plain text.

What’s Next?

Coming Up in Part 2:

Quotes and citations
Displaying code properly
Subscript and superscript
Mini project: Book review page

👉 Continue to Part 2 →

Practice Challenge 💪

Before moving to Part 2, create a page about your favorite movie that includes:

Movie title in italic
Your rating with bold text
A highlighted quote
Old vs new release date (using <del> and <ins>)
Theater address with line breaks
Horizontal lines between sections

Get the Source Code

👉 Codeboid/html-series

Final Thoughts on Text Formatting

You just learned the foundations of text formatting! These simple tags are used on every professional website.

Practice by creating different pages: sale announcements, event invitations, product descriptions.

Keep going — you’re building real skills! 💪

See you in Part 2! 🌱

HTML Typography Tutorial: Bold, Italic & Text Styling

What You’ll Learn Today

Before You Start the HTML Typography tutorial

What Is Typography?

Quick Reminder: Headings & Paragraphs

Bad Text vs Good Text (Very Important)

❌ Bad Example (Don’t Do This)

✅ Good Example (Much Better!)

Step 1: Bold Text — <b> vs <strong>

Just looks Bold: <b>

Bold AND Important: <strong>

Practice Challenge 🎯

Italic Text: <i> vs <em>

Just italic: <i>

Emphasis: <em>

Practice Challenge 🎯

Step 3: Combining Bold and Italic

Step 4: Underline, Highlight & Small Text

Underline: <u>

Highlight Text: <mark>

Small Text: <small>

Practice Challenge 🎯

Step 5: Deleted & Inserted Text (Showing Changes)

Deleted Text: <del>

What it does:

When to use <del>:

Inserted Text: <ins>

What it does:

When to use <ins>:

Using <del> + <ins> Together (Very Common)

Strikethrough Text: <s>

Difference between <s> and <del>:

Practice Challenge 🎯

Step 6: Line Breaks & Section Dividers

Line Break: <br>

Horizontal Line: <hr>

Practice Challenge 🎯

Step 7: Mini Project — Product Sale Page

Typography Cheat Sheet (Part 1)

Quick Recap: What You Learned Today

Common Beginner Mistakes (Totally Normal)

What’s Next?

Coming Up in Part 2:

Practice Challenge 💪

Get the Source Code

Final Thoughts on Text Formatting

Step 1: Bold Text — `<b>` vs `<strong>`

Just looks Bold: `<b>`

`Bold AND Important`: `<strong>`

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

Just italic: `<i>`

Emphasis: `<em>`

Underline: `<u>`

Highlight Text: `<mark>`

Small Text: `<small>`

Deleted Text: `<del>`

When to use `<del>`:

Inserted Text: `<ins>`

When to use `<ins>`:

`Using <del>` + `<ins>` Together (Very Common)

Strikethrough Text: `<s>`

Difference between `<s>` and `<del>`:

Line Break: `<br>`

Horizontal Line: `<hr>`