HTML Text Formatting

What Is It?

Text formatting tags explain why some words are different: important, emphasized, highlighted, edited, or part of a formula.

What the Tags Mean

• strong: important text.
• b: draws attention without added importance.
• em: stress emphasis.
• i: an alternate voice, such as a scientific name.
• mark: a relevant highlight.
• small: a side note.
• del: deleted text.
• ins: inserted text.
• sub: lower text for notation.
• sup: raised text for notation.

Example 1

Save each example as index.html and open it in your browser. Each code block is a complete page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Text Formatting</title>
 
</head>
<body>
<p><strong>Important:</strong> bring your notebook.</p>
<p>Bring <em>one</em> notebook.</p>
<p>Search result: <mark>HTML</mark> lessons.</p>
</body>
</html>

What you see: Important is usually bold, one is usually italic, and HTML is highlighted. Each tag gives those words a meaning.

Example 2: Another Use

Show a correction or write a formula.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Text Formatting</title>
 
</head>
<body>
<p>Class is on <del>Monday</del> <ins>Tuesday</ins>.</p>
<p>Water: H<sub>2</sub>O</p>
<p>Area: 4 m<sup>2</sup></p>
</body>
</html>

Simple Tip

Choose the tag for its meaning. Use CSS when you only want a different color or size. Do not depend on a screen reader announcing a special voice.

Try It Yourself

Write one important instruction using strong. Then write a corrected word using del and ins.