HTML Text Formatting

HTML text formatting elements give words special meaning or appearance, such as importance, emphasis or highlighting. Choosing the right tag helps screen readers and search engines understand your content.

Importance and Emphasis

<strong> marks important text and <em> marks stressed emphasis. <b> and <i> look the same but carry no extra meaning; use them for things like keywords or foreign words.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>strong and em</title></head>
<body>
  <p><strong>Warning:</strong> the oven is hot.</p>
  <p>I <em>really</em> enjoyed the book.</p>
  <p>The word <i lang="fr">bonjour</i> means hello. Product: <b>Green Tea</b>.</p>
</body>
</html>

Highlight, Small, Deleted and Inserted Text

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>More Formatting</title></head>
<body>
  <p>Remember to <mark>submit the report</mark> today.</p>
  <p>Price: <del>$40</del> <ins>$29</ins></p>
  <p><small>Terms and conditions apply.</small></p>
</body>
</html>

Subscript and Superscript

<sub> lowers text and <sup> raises it, which is useful for formulas and footnotes.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>sub and sup</title></head>
<body>
  <p>Water is H<sub>2</sub>O.</p>
  <p>Area = r<sup>2</sup> &times; 3.14</p>
</body>
</html>

Quotes and Code

Use <blockquote> for long quotations, <q> for short inline quotes, <abbr> for abbreviations, and <code> for snippets of computer code.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Quotes</title></head>
<body>
  <blockquote cite="https://example.com">Simplicity is the soul of efficiency.</blockquote>
  <p>She said <q>see you tomorrow</q> and left.</p>
  <p><abbr title="Cascading Style Sheets">CSS</abbr> styles pages. Run <code>npm install</code> first.</p>
</body>
</html>

Frequently asked questions

What is the difference between strong and b in HTML?

<strong> means the text is important and is announced that way by assistive tech. <b> only draws attention visually without adding importance.

Is the u tag deprecated?

No, <u> is valid in HTML5 but means unarticulated annotation, such as marking a spelling mistake. For simple underline styling use CSS text-decoration.

How do I show HTML code on a web page?

Wrap it in <code> or <pre>, and replace < with &lt; and > with &gt; so the browser displays the tags instead of rendering them.