Lesson 9 of 30

HTML Formatting

1 min read · Free · No login needed

HTML has special tags that change how text looks and what it means. The two most used are  for important text (shown bold) and  for emphasised text (shown italic).

Bold and italic — the right way

You may also see  and . They look the same on screen — bold and italic — but they carry no meaning.  tells the browser and search engines "this is important".  says "stress this word when reading aloud". Screen readers for blind users actually change their voice for strong and em, but not for b and i. So use strong and em in your pages.

Other useful formatting tags

 — smaller text, often used for fine print.
 — highlighted text, like a yellow marker pen.
<del> — struck-through text (something removed).
<ins> — underlined text (something added).
 — subscript, like the 2 in H₂O.
 — superscript, like the 2 in x².

Tip: Formatting tags are for meaning, not decoration. If you only want a visual effect — for example, red text — use CSS instead.

Example

<!DOCTYPE html>
<html>
<head>
<title>Formatting</title>
</head>
<body>

<p>This is <strong>important</strong> and this is <em>emphasised</em>.</p>
<p><small>Small print.</small> <mark>Highlighted text.</mark></p>
<p>Price was <del>₹500</del> <ins>₹399</ins>.</p>
<p>Water is H<sub>2</sub>O and 2<sup>2</sup> = 4.</p>

</body>
</html>

Output

Output — how it looks in the browser

Try it yourself: copy the code above into a file named test.html, open it in your browser, and change the text to see what happens. That is how you learn — by changing things and watching the result.

HTML Styles HTML Comments