HTML · Lesson 3

Formatting Tags

Styling words on your page

Sometimes one word in a sentence needs to stand out. Formatting tags change how a few words look, right in the middle of a sentence.

What you'll learn

  • How to make words bold, italic, underlined or highlighted.
  • How to cross out words and make small print.
  • How to write text slightly below or above the line, like H₂O and x².

Let's mark up some words

Formatting tags wrap around a few words inside a sentence and change how they look: bolder, slanted, highlighted, crossed out, smaller, or lifted a little up or down. Unlike headings and paragraphs, they don't start a new line.

Think of marking up your notes with pens. You press harder to make a word bold, slant your writing, underline a word, run a yellow highlighter over a key phrase, cross out a mistake, or write a tiny note in the corner. Formatting tags do the same things to words on a web page.

Each pair wraps around only the words it changes. The rest of the sentence stays normal, and nothing moves to a new line.

A closer look

They stay inside the line

Formatting tags change a few words without breaking the line, so you'll usually put them inside a <p> or a heading. A paragraph with a bold word in it is still one paragraph.

Two at once

You can put one formatting tag inside another. <b><i>Big sale</i></b> is bold and italic. Just like in Lesson 1, close the inner tag first: </i> comes before </b>.

Looks or meaning

<b> and <i> only change how words look. HTML also has <strong>, for words that are important, and <em>, for words you would say with stress. Browsers show them bold and italic too, and screen readers may read them with more emphasis. Either pair works while you're learning.

Let's build it

Let's write a sale announcement for Front Page Bytes. Each step shows the whole page, and the new lines are highlighted.

Bold and italic

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2>Phone Sale This Weekend</h2>    <p><b>Breaking:</b> three new phones are now on sale. Read the full review in <i>Front Page Weekly</i>.</p>  </body></html>
What you see

<b> makes Breaking: bold so it catches the eye, and <i> slants the magazine name Front Page Weekly. Notice that the rest of the sentence stays normal.

Highlight and underline

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2>Phone Sale This Weekend</h2>    <p><b>Breaking:</b> three new phones are now on sale. Read the full review in <i>Front Page Weekly</i>.</p>    <p>Our top pick is <mark>the blue model</mark>. <u>Update</u>: every phone now comes with a free case.</p>  </body></html>
What you see

<mark> works like a highlighter pen and puts a yellow background behind the words. <u> draws a line under Update.

Cross out an old price

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2>Phone Sale This Weekend</h2>    <p><b>Breaking:</b> three new phones are now on sale. Read the full review in <i>Front Page Weekly</i>.</p>    <p>Our top pick is <mark>the blue model</mark>. <u>Update</u>: every phone now comes with a free case.</p>    <p>Price: <del>₱20,000</del> ₱15,000</p>  </body></html>
What you see

<del> draws a line through the old price, so readers can see it was changed instead of the number just disappearing.

Below and above the line

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2>Phone Sale This Weekend</h2>    <p><b>Breaking:</b> three new phones are now on sale. Read the full review in <i>Front Page Weekly</i>.</p>    <p>Our top pick is <mark>the blue model</mark>. <u>Update</u>: every phone now comes with a free case.</p>    <p>Price: <del>₱20,000</del> ₱15,000</p>    <p>Keep it away from water (H<sub>2</sub>O). This is the 2<sup>nd</sup> sale this year.</p>  </body></html>
What you see

<sub> drops the 2 in H₂O a little below the line, and <sup> lifts the "nd" in 2ⁿᵈ a little above it. Both also make the text smaller.

Small print

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2>Phone Sale This Weekend</h2>    <p><b>Breaking:</b> three new phones are now on sale. Read the full review in <i>Front Page Weekly</i>.</p>    <p>Our top pick is <mark>the blue model</mark>. <u>Update</u>: every phone now comes with a free case.</p>    <p>Price: <del>₱20,000</del> ₱15,000</p>    <p>Keep it away from water (H<sub>2</sub>O). This is the 2<sup>nd</sup> sale this year.</p>    <p><small>© Front Page Bytes. Prices may change without notice.</small></p>  </body></html>
What you see

<small> shrinks the text, which is perfect for fine print like a copyright line. The © sign is typed like any other character.

Quick notes

<b> Bold 
<b>Breaking:</b>

How to use

  • Wrap only the words you want bold.
  • <strong> Also bold, and marks the words as important.

Examples

  1. A label that should stand out.

    <p><b>Breaking:</b> New phones arrive.</p>

  2. An important warning, using <strong>.

    <p><strong>Keep</strong> your password secret.</p>
<i> Italic (slanted) 
<i>Front Page Weekly</i>

How to use

  • Wrap the words you want slanted, like names of books or shows.
  • <em> Also slanted, for words you would say with stress.

Examples

  1. The name of a book, show or newspaper.

    <p>I read <i>Front Page Weekly</i> every day.</p>

  2. A word you say with stress, using <em>.

    <p>I <em>really</em> like this phone.</p>
<u> Underline 
<u>Update</u>

How to use

  • Wrap the words to underline.
  • Underlined words can look like links, so use it lightly.

Examples

  1. A label that marks a change.

    <p><u>Update:</u> The sale starts at noon.</p>

  2. A misspelled word, like a spell checker shows it.

    <p>The <u>fone</u> is new.</p>
<mark> Highlight 
<mark>the blue model</mark>

How to use

  • Wrap the words to highlight, like a yellow marker.

Examples

  1. The word that matches a search.

    <p>Results for "blue": the <mark>blue</mark> model.</p>

  2. A key fact in a story.

    <p>The sale ends <mark>this Friday</mark>.</p>
<del> Crossed out 
<del>₱20,000</del>

How to use

  • Wrap old or removed text, like an old price.

Examples

  1. An old price next to the new one.

    <p><del>₱20,000</del> ₱15,000</p>

  2. A finished item on a to-do list.

    <li><del>Buy a charger</del></li>
<small> Small print 
<small>© Front Page Bytes</small>

How to use

  • Wrap fine print, like a copyright line.

Examples

  1. A copyright line at the bottom of a page.

    <p><small>© 2026 Front Page Bytes</small></p>

  2. Fine print beside a price.

    <p>₱15,000 <small>Prices may change.</small></p>
<sub> Below the line 
H<sub>2</sub>O

How to use

  • Wrap the characters that sit lower, like the 2 in H₂O.

Examples

  1. Water in science class.

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

  2. Carbon dioxide.

    <p>CO<sub>2</sub></p>
<sup> Above the line 
x<sup>2</sup>

How to use

  • Wrap the characters that sit higher, like the 2 in x².

Examples

  1. A number squared in math.

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

  2. A date like the 1st.

    <p>October 1<sup>st</sup></p>

Common mistakes

These are mistakes many beginners make. Each mini browser shows what really happens.

Forgetting the slash in a closing tag

The mistake
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <p><b>Breaking:<b> new phones are on sale.</p>    <p>Read the full story tomorrow.</p>  </body></html>
What you see

The second <b> has no slash, so the browser reads it as another opening tag. Nothing gets closed, and the bold spreads into the next paragraph too.

Tip: A closing tag always has a slash: </b>. If bold or italic spreads too far, look for a missing slash.

Underlined words that look like links

The mistake
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <p>See <u>today's deals</u> below.</p>    <p>See <a href="/deals">today's deals</a> below.</p>  </body></html>
What you see

On the web, underlined words usually mean "click me". Readers may try to click today's deals in the first line, but only the second line is a real link.

Tip: Use <u> sparingly. To make a word stand out, <b> or <mark> is usually clearer.

Closing two tags in the wrong order

The mistake
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <p><b><i>Big sale today!</b></i> Prices start at ₱300.</p>  </body></html>
What you see

This one looks fine, because the browser quietly fixes the order. It's still best to close the inner tag first: the code is easier to read, and other tools may not fix it the same way.

Tip: Close the inner tag first: <b><i>Big sale today!</i></b>

Test your knowledge

Edit the code on the left. The mini browser updates as you type, and each goal gets a check mark when it's done.

No clicking needed. Each goal gets a check mark by itself once your code does it.

  1. Make “Big sale today!” bold.
  2. Highlight a word or two with <mark>.
  3. Cross out the old price with <del>.
  4. Lower the 2 in H2O with <sub>.
Your code
What you see
Try an exercise

Recap

  • Formatting tags wrap a few words inside a sentence and don't start a new line.
  • <b> bold, <i> italic, <u> underline, <mark> highlight, <del> crossed out, <small> small print.
  • <sub> puts text below the line and <sup> puts it above. Close inner tags first when you combine them.

References

Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.

  • WHATWG. HTML Living Standard (official specification). Open reference
  • LibreTexts. Web Site Design: HTML (2022, open textbook). Open reference