Bold, Italic, and Other Text Formatting Tags

When you read a web page, you often see some words bold, italic, or even highlighted. These styles are not added by magic—developers use HTML text formatting tags to control how text looks.

In this beginner-friendly guide, you’ll learn how to:

Make text bold and italic
Underline and highlight important words
Add small notes and line breaks
Combine formatting tags to create clear, readable pages

No experience is required. If you can copy and paste, you can follow along.

What Are HTML Text Formatting Tags?

HTML (HyperText Markup Language) is the basic language used to create web pages. It uses tags to tell the browser how to display content.

A tag is a word wrapped in angle brackets, like this:

<p>Some text here</p>

 is the opening tag (it means "start a paragraph")
 is the closing tag (it means "end the paragraph")

Text formatting tags work the same way. You put them around the text you want to style.

Getting Ready: How to Test Your Code

You don’t need any special tools. Here’s the easiest way to start:

Open a simple text editor:
- Windows: Notepad
- Mac: TextEdit (set it to plain text mode)
Copy the code examples into the editor.
Save the file as formatting.html.
Double-click the file to open it in your web browser (Chrome, Edge, Firefox, Safari, etc.).

You’ll see your code displayed as a real web page.

Example 1: Bold and Italic Text

Let’s start with the most common styles: bold and italic.

<!DOCTYPE html>
<html>
<head>
  <title>Text Formatting Example 1</title>
</head>
<body>
  <!-- Bold text using <strong> -->
  <p>This is <strong>very important</strong> text.</p>

  <!-- Italic text using <em> -->
  <p>This is <em>emphasized</em> text.</p>

  <!-- Bold and italic together -->
  <p>This is <strong><em>extra important</em></strong> text.</p>
</body>
</html>

What’s happening here?

... makes text bold and also tells the browser it’s important.
... makes text italic and tells the browser it’s emphasized.
You can nest tags, like text, to combine styles.

What you should see in the browser:

The words "very important" are bold.
The word "emphasized" is italic.
The words "extra important" are bold and italic.

Try it yourself

Change the sentences inside .... For example:

Make your name bold.
Make your favorite hobby italic.
Make a short warning both bold and italic.

Refresh the browser after each change to see the result.

Example 2: Underline, Highlight, and Line Breaks

Now let’s add more formatting: underline, highlight, and line breaks.

<!DOCTYPE html>
<html>
<head>
  <title>Text Formatting Example 2</title>
</head>
<body>
  <!-- Underlined text using <u> -->
  <p>This is <u>underlined</u> text.</p>

  <!-- Highlighted text using <mark> -->
  <p>This is <mark>highlighted</mark> text.</p>

  <!-- Line break using <br> -->
  <p>
    This sentence is on the first line.<br>
    This sentence appears on the next line.
  </p>
</body>
</html>

What’s happening here?

... underlines text.
... highlights text with a yellow background (in most browsers).
  creates a line break (like pressing Enter once). It does not need a closing tag.

What you should see in the browser:

The word "underlined" is underlined.
The word "highlighted" has a yellow background.
The second sentence appears on a new line, but still inside the same paragraph.

Try it yourself

Add   in different places inside the paragraph.
Highlight a whole sentence with .
Underline a word that you want to stand out.

Notice how small changes in your code change what you see on the page. That’s real progress.

Example 3: Small Notes and Combined Styles

Sometimes you want to add a small note or side comment. HTML has a tag for that too: .

In this example, we’ll combine several tags to create a short "announcement" block.

<!DOCTYPE html>
<html>
<head>
  <title>Text Formatting Example 3</title>
</head>
<body>
  <h1>Store Announcement</h1>

  <p>
    Our <strong>Big Summer Sale</strong> is now <em>live</em>!<br>
    Get up to <mark>50% off</mark> on selected items.
  </p>

  <p>
    <small>
      *Offer valid until the end of the month. Some exclusions apply.
    </small>
  </p>
</body>
</html>

What’s happening here?

<h1>...</h1> creates a large heading for the page.
 makes "Big Summer Sale" bold and important.
 makes "live" italic.
 highlights the discount.
 makes the fine print smaller, like a footnote or disclaimer.

What you should see in the browser:

A big heading: "Store Announcement".
A paragraph with bold, italic, and highlighted text.
A small line of text with the offer details.

Try it yourself

Turn this into your own mini announcement:

Change the heading to something else, like "Blog Update" or "Event Reminder".
Update the sale text to describe an event, a class, or anything you like.
Adjust the small note to add your own "terms".

You’re now using multiple formatting tags together—nice work.

Example 4: Building a Simple Styled Paragraph Block

Let’s bring everything together into a short, styled "about me" section. We’ll reuse the same tags in a slightly more realistic way.

<!DOCTYPE html>
<html>
<head>
  <title>Text Formatting Example 4</title>
</head>
<body>
  <h1>About Me</h1>

  <p>
    Hi, my name is <strong>Your Name</strong>.
    I am learning <em>HTML basics</em> and how to format text.
  </p>

  <p>
    I enjoy <u>reading</u>, <u>coding</u>, and
    <mark>creating simple web pages</mark>.<br>
    This is my <strong><em>first step</em></strong> toward web development.
  </p>

  <p>
    <small>
      (You’re reading my practice page. More updates coming soon!)
    </small>
  </p>
</body>
</html>

What’s happening here?

You’re combining bold, italic, underline, highlight, and small text in one mini "profile".
You’re using   to control where a new line starts.
Everything is wrapped in  tags so each paragraph is separate.

What you should see in the browser:

A heading that says "About Me".
A short introduction about you, with some words bold, italic, underlined, and highlighted.
A smaller note at the bottom.

Try it yourself

Make this page your own:

Replace "Your Name" with your actual name.
Change the hobbies to your real interests.
Highlight the part that feels most important to you.

This is a great way to practice while also making something personal.

Common Mistakes (and How to Avoid Them)

Here are a few things beginners often run into:

Forgetting closing tags
If you write  but forget , everything after may turn bold. Always make sure tags come in pairs (except for tags like  ).

Putting tags in the wrong order
If you nest tags, close them in the opposite order you opened them:

<strong><em>Text</em></strong> <!-- correct -->
<strong><em>Text</strong></em> <!-- incorrect -->

Expecting spaces and line breaks without tags
Browsers don’t always show extra spaces or line breaks in your code. Use   for new lines and  for new paragraphs.

Don’t worry if you make these mistakes. Everyone does at first. Just fix the code, refresh the page, and see what changes.

Quick Recap and What’s Next

You’ve learned how to:

Make text bold with 
Emphasize text in italics with 
Underline text with 
Highlight text with 
Add line breaks with  
Create small notes with

These simple tags are the building blocks for readable, clear web pages. You can already make text stand out, guide your reader’s attention, and add helpful notes.

Next steps you can try:

Create a full "About Me" page using only text formatting tags and paragraphs.
Make a "News" or "Announcements" section with headings and highlighted keywords.
Look up other HTML tags like <h2>–<h6> for smaller headings.

Keep experimenting and adjusting your code. Every small change teaches you something new. You’re already writing HTML—keep going!

Mudzinga