🎓 A1Learner
🔍

HTML Text Formatting

Text formatting elements mark words inside a line with a special meaning or emphasis. Each element changes how its words are presented or understood.

Bold and important text

The b element makes text bold. The strong element marks important text.

<p>Please <b>note</b> the date.</p>
<p><strong>Warning.</strong> The floor is wet.</p>

Italic and emphasised text

The i element sets text in italics. The em element marks emphasised text.

<p>The word <i>aloha</i> means hello.</p>
<p>Please <em>arrive</em> on time.</p>

Highlighted and small text

The mark element highlights text. The small element shows side comments in smaller text.

<p><mark>Sale ends today.</mark></p>
<p>Full price list. <small>Tax is extra.</small></p>

Edited text

The del element marks removed text. The ins element marks added text.

<p>Price: <del>ten pounds</del> <ins>eight pounds</ins></p>

Text below and above the line

The sub element lowers text below the line. The sup element raises text above the line.

<p>Water is H<sub>2</sub>O.</p>
<p>The area is 5 m<sup>2</sup>.</p>

Example

<!DOCTYPE html>
<html>
<head>
<title>Lab Notes</title>
</head>
<body>
<h1>Lab Notes</h1>
<p><strong>Safety first.</strong> Wear <em>clean</em> gloves.</p>
<p>The sample is <mark>ready</mark> today.</p>
<p>Water is H<sub>2</sub>O.</p>
<p>Cost changed from <del>ten pounds</del> to <ins>eight pounds</ins>.</p>
</body>
</html>

Key points

  • strong element: text with strong importance
  • em element: text with stress emphasis
  • mark element: highlighted text
  • Use del for removed text and ins for added text
  • Use sub for text below the line and sup for text above the line
  • Formatting marks give words a meaning or a distinct presentation.

In this example, the heading names the page. The strong element marks an important warning. The em element emphasises one word in that paragraph. The mark element highlights a ready sample. The sub element lowers the number in the water formula. The del and ins elements show a price edit.

Note

Prefer strong and em when the meaning of the words matters.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which element marks text with strong importance?