HTML Text Formatting Explained - strong, em, mark

Sometimes you need to highlight an important word, indicate an old crossed-out price, or write a math formula. HTML has special tags for all these cases. In this lesson you will learn all text formatting tags and when to use each one.

Visual Formatting vs. Semantic Formatting - An Important Difference

Before we begin, you must understand a basic concept: in HTML there are two types of formatting tags:

• Visual (Presentational) formatting: changes only the appearance of text - like <b> and <i>. It does not give any extra meaning to search engines or screen readers.
• Semantic formatting: changes the appearance and adds meaning - like <strong> and <em>. Google reads these tags and understands that the words are important.

Golden rule: If you are emphasizing text because it is truly important, use <strong> or <em>. If you are emphasizing it only for visual reasons, use CSS.

Core Formatting Tags - Full Explanation

Bold Text - <b> and <strong>

Both make text bold - but there is an important difference:

<!-- b: visual formatting only - no extra meaning -->
<p>Ingredients: <b>flour, sugar, eggs</b></p>

<!-- strong: formatting + semantic importance - Google reads it -->
<p><strong>Warning: do not run the code without testing.</strong></p>

Italic Text - <i> and <em>

Both make text italic - but with the same difference as above:

<!-- i: for foreign names, technical terms, titles -->
<p>The term <i>Hypertext</i> means linked text.</p>

<!-- em: to emphasize a key word in the sentence -->
<p>You must save your file <em>before</em> closing the browser.</p>

Highlighting - <mark>

It highlights text with a default yellow color - like using a highlighter pen. Very useful for highlighting search results or important information.

<p>In this lesson we will learn <mark>text formatting</mark> in HTML.</p>

<!-- Common example: highlight a search result -->
<p>Search results for: <mark>Learn HTML</mark></p>

Strikethrough Text - <del>

It draws a line through the text to indicate deleted or old content. It is often used in pricing offers.

<p>
    Original price: <del>500 MAD</del><br>
    Discounted price: <strong>350 MAD</strong>
</p>

Inserted Text - <ins>

It underlines the text to indicate newly added content. It is usually used with <del> to show changes in a document.

<p>Old version: <del>HTML 4</del></p>
<p>New version: <ins>HTML 5</ins></p>

Small Text - <small>

It makes the text slightly smaller than the surrounding text. It is often used for footnotes, legal notes, and copyright notices.

<p>Buy now and get 20% off!</p>
<small>* Discount valid until the end of the month only</small>

Subscript and Superscript - <sub> and <sup>

<sub> lowers text below the baseline - for chemical formulas.
<sup> raises text above the baseline - for math equations, references, and exponents.

<!-- Chemical formula: water -->
<p>Water: H<sub>2</sub>O</p>

<!-- Math equation: e = mc^2 -->
<p>Einstein's theory: E = mc<sup>2</sup></p>

<!-- Reference footnote -->
<p>The Quran<sup>[1]</sup> is a strong reference for the Arabic language.</p>

Reference Table - All Formatting Tags

Full Practical Example - A Formatted Article

<h1>Beginner's Guide to Learning HTML</h1>

<p>
    <strong>HTML</strong> is the basic building block for web pages.
    You should learn it <em>before</em> any other language.
</p>

<p>
    Original course price: <del>200 USD</del>
    Now only: <strong>Completely free!</strong>
</p>

<p>
    The chemical formula for water: H<sub>2</sub>O
    and Einstein's theory: E = mc<sup>2</sup>
</p>

<p>
    <mark>Important note:</mark> Practice is more important than memorization.
</p>

<small>* All examples are tested and work in Chrome, Firefox, and Edge</small>

Frequently Asked Questions - FAQ

What is the practical difference between <strong> and <b>?

Visually there is no difference - both show bold text. But search engines like Google and screen readers give more weight to words inside <strong>. That is why it is always preferred when you want to emphasize the importance of text.

Can formatting tags be combined?

Yes, they can be nested: <strong><em>bold, italic, and important text</em></strong>. But do not overdo nesting because the code becomes complex and hard to read.

Is <mark> supported in all browsers?

Yes, <mark> is fully supported in all modern browsers. You can change the default highlight color (yellow) with CSS: mark { background-color: lightblue; }

When do I use <del> and when do I use CSS for a line through text?

Use <del> when the text means "deleted" or "old" (like an old price). If you want the line for visual reasons only, use CSS: text-decoration: line-through;