HTML Text Formatting Tags: strong, em, mark, sub, sup and More

What you will learn

You already know how to make text bold or italic with <b> and <i>. But HTML actually has two tags for “bold” and two tags for “italic” — one that only changes the look, and one that also changes the meaning. In this lesson you will learn every common text formatting tag, why the “looks the same, means something different” pairs exist, and which of these tags you should stop using.

The one idea that explains everything in this lesson

Every tag in this lesson falls into one of two groups:

1. Presentational tags — they change how text looks, and nothing else. <b>, <i>, <big>.
2. Semantic tags — they change how text looks and tell the browser, search engines and screen readers why the text is different. <strong>, <em>, <mark>, <del>, <ins>.

Both groups can look identical on screen. The difference only shows up when a machine reads your page instead of a human looking at it — a screen reader, a search engine, or your own CSS.

Rule of thumb: if the text is different for a reason (it’s important, it’s been edited, it’s a definition), use the semantic tag. If it’s different only in the designer’s eyes with no real reason, a presentational tag is acceptable — though on real projects you will usually reach for CSS instead.

Bold text: <b> vs <strong>

<p><b>I am bold.</b></p>
<p><strong>I am strong.</strong></p>

Both render exactly the same: bold text. The difference is invisible on screen and very real underneath:

	<b>	<strong>
Meaning	None. Just “make this bold”	“This text is important”
Screen reader	Reads normally	Often adds emphasis in the voice
Typical use	A product name, a keyword you want visually bold with no special importance	A warning, an important word, a critical instruction

<p><strong>Warning:</strong> Disconnect the power before opening the case.</p>
<p>The recipe needs two cups of <b>Basmati</b> rice.</p>

In the first line, “Warning” is genuinely important — a person skimming the page, or a screen reader user, should not miss it. In the second line, “Basmati” is just bold for style; nothing bad happens if someone misses the emphasis.

Can you nest them? Yes. <strong> can be used more than once on a page, and nesting <strong><strong> (rare) means “even more important”. You do not need to worry about this as a beginner — just pick <strong> when the meaning is important, <b> when it’s purely visual.

Italic text: <i> vs <em>

Same story as bold, one level down:

<p><i>Homo sapiens</i> is the scientific name for humans.</p>
<p>This is <em>very</em> important.</p>

	<i>	<em>
Meaning	None. Just “make this italic”	“Stress this word” — it changes the meaning of the sentence
Typical use	Foreign words, scientific names, technical terms, titles of works	A word that, if you read the sentence aloud, you would say louder

Try reading this sentence out loud, stressing the italic word each time — you will hear how <em> genuinely changes what the sentence means:

<p><em>I</em> did not take your pen.</p>   <!-- someone else did -->
<p>I <em>did not</em> take your pen.</p>   <!-- flat denial -->
<p>I did not take <em>your</em> pen.</p>   <!-- I took a different pen -->

<i> has no such power. It is simply a different font style, commonly used for:

<p>The word <i>bug</i> originally meant a real insect.</p>
<p>My favourite book is <i>The Alchemist</i>.</p>

Highlighting: <mark>

<mark> highlights text with a yellow background by default, like a highlighter pen on paper.

<p>Search results for "HTML": <mark>HTML</mark> is a markup language used to structure web pages.</p>

Use it when text is relevant right now, in this specific context — a matched search term, a key phrase you want the reader’s eye drawn to. It is not for “make text yellow”; if you just want a yellow background with no real reason, use CSS instead.

mark {
  background: #fff59d;
  padding: 0 2px;
}

Smaller text: <small>

<small> reduces the font size and is meant for side comments: legal text, disclaimers, copyright notices, fine print.

<p>Buy now for $499.</p>
<p><small>Price excludes shipping and taxes. Offer valid until stock lasts.</small></p>
<p><small>&copy; 2026 MyCodeNest. All rights reserved.</small></p>

It is not a general-purpose “make text smaller” tool. If you want smaller text purely for design (like a smaller heading), use CSS font-size. <small> is for content that is genuinely secondary — the kind of text you’d expect a lawyer to have added.

Showing edits: <del> and <ins>

These two tags show a change to your content, and they are always best used together.

<p>Price: <del>$50</del> <ins>$35</ins></p>
<p>Meeting time: <del>3:00 PM</del> <ins>4:30 PM</ins></p>

• <del> (deleted) shows text with a strikethrough by default. It means “this used to be here, but it’s removed or outdated now.”
• <ins> (inserted) shows text underlined by default. It means “this is new.”

They can also carry two useful attributes: cite (a URL explaining the change) and datetime (when it happened):

<p>
  <del datetime="2026-09-01">Registration closes September 1st.</del>
  <ins datetime="2026-09-15">Registration closes September 15th.</ins>
</p>

You will see this pattern often on pricing pages (“was $50, now $35”) and changelogs.

Strikethrough without meaning: <s>

<s> also draws a line through text, but it carries a different meaning from <del>:

	<del>	<s>
Meaning	Content was removed/edited from the document (a real change)	Content is simply no longer accurate or relevant (nothing was “edited”)
Typical use	Price updates, corrected text, tracked changes	A crossed-out old price shown next to a sale price, a completed to-do item

<p>The event was <s>cancelled</s> postponed to next week.</p>
<p><s>Buy milk</s></p>

In practice the two often look identical and beginners mix them up — the difference is subtle even for experienced developers. A simple way to decide: if you are documenting an actual edit to the page’s content, use <del>/<ins>. If you’re just showing something as crossed out and no longer true (like a struck-through to-do item), use <s>.

Subscript and superscript: <sub> and <sup>

These move text slightly below or above the normal line, and shrink it — used in science and maths, not for decoration.

<p>Water is H<sub>2</sub>O.</p>
<p>Carbon dioxide is CO<sub>2</sub>.</p>

<p>5<sup>2</sup> = 25.</p>
<p>The 1<sup>st</sup> of January is New Year's Day.</p>
<p>E = mc<sup>2</sup></p>

<sub> is for chemical formulas and footnote markers. <sup> is for exponents and ordinal suffixes (1ˢᵗ, 2ⁿᵈ, 3ʳᵈ).

The deprecated tag: <big>

You may see <big> in old code or old tutorials. Do not use it. It was removed from the HTML standard years ago, and modern browsers may not support it at all.

<!-- Don't do this -->
<p>lorem <big>this is bigger text</big></p>

<!-- Do this instead -->
<p>lorem <span style="font-size: larger;">this is bigger text</span></p>

Whenever you want to change only how text looks (size, colour, spacing) with no real meaning behind it, the answer in modern HTML is always the same: wrap the text in a <span> and use CSS.

Putting several of them together

<article>
  <p><strong>Note:</strong> This recipe serves <em>four</em> people.</p>

  <p>
    Preheat the oven to 180<sup>o</sup>C. Mix the flour
    (H<sub>2</sub>O is not an ingredient here, just an example!) with sugar.
  </p>

  <p>
    Original price: <del>$20</del> <ins>$15</ins>
    <small>(discount valid this week only)</small>
  </p>

  <p>Search matched: bake at <mark>180°C</mark> for 25 minutes.</p>
</article>

Read it out loud the way a screen reader roughly would: “Note: … serves four people… Original price, $20, $15, (discount valid this week only)…” Each tag is pulling its own weight — nothing here is decoration for decoration’s sake.

Common mistakes

• Using <b> or <i> when the text is actually important or emphasized. If a screen reader user needs to know something is a warning, <b> will not tell them — use <strong>.
• Using <strong> or <em> just to make text bold or italic for looks. Overusing them dilutes their meaning; save them for genuinely important or emphasized text, and use CSS for pure styling.
• Using <mark> as a general “make it yellow” tool. It’s for content that is relevant right now (like a search match), not a design colour choice.
• Confusing <del> and <s>. <del> is for a real edit to the content; <s> is for something no longer accurate or relevant.
• Using <big>. It’s deprecated — use CSS font-size instead.
• Nesting formatting tags incorrectly, for example <p><strong><em>text</p></em></strong>. Always close the inner tag before the outer one: <strong><em>text</em></strong>.
• Forgetting these are all inline elements. They must live inside a block element like <p> and can only wrap text and other inline elements — never a <div> or a heading.

Interview-style questions

What is the difference between <b> and <strong>? Both make text bold, but <strong> also tells browsers, search engines and screen readers that the text is important. <b> is purely visual.

What is the difference between <i> and <em>? <i> is a visual italic with no meaning. <em> stresses the word and changes the meaning of the sentence, and screen readers can emphasize it.

When would you use <del> versus <s>? Use <del> to show that content was genuinely removed or edited (often paired with <ins> for the replacement). Use <s> when content is simply no longer accurate or relevant, with no real “edit” being tracked.

Why should you avoid <big>? It is deprecated in HTML5 and may not render in modern browsers. Use CSS font-size instead.

Practice

1. Use the Practice in Editor button. Change one <mark> example so it highlights a different word, and change the <del>/<ins> prices to your own.

2. Write one sentence using <em> in three different positions (like the “I did not take your pen” example) and read each version aloud. Notice how the meaning changes.

3. Build a small “old price vs new price” line using <del> and <ins>, then add a <small> note below it saying when the offer ends.

4. This code mixes up meaning and looks. Rewrite it using the correct semantic tags:

   <p><b>Caution: this appliance gets hot.</b></p>
   <p>Formula: H<i>2</i>O</p>
   <p><big>50% OFF TODAY</big></p>

Recap

• HTML has presentational tags (<b>, <i>, <big>) that only change looks, and semantic tags (<strong>, <em>, <mark>, <del>, <ins>) that also carry meaning.
• <strong> = important, <b> = just bold. <em> = stressed/changes meaning, <i> = just italic.
• <mark> highlights text that is relevant right now, like a search match.
• <small> is for genuine side comments: fine print, disclaimers, copyright.
• <del> and <ins> show a real edit (usually together); <s> shows something that’s simply no longer true or relevant.
• <sub> and <sup> are for chemical formulas, exponents and ordinal suffixes — not decoration.
• <big> is deprecated. Use CSS font-size for anything purely visual.