HTML Formatting

In web pages, besides organizing text with paragraphs, we often need to emphasize, highlight, or change the appearance of parts of the text — for example, making a word bold, italic, or displaying it as subscript. HTML provides a set of formatting tags that do not change the document structure but only affect the appearance or semantics of text.

Why do we need formatting tags?

Formatting tags serve two important purposes:

1. Semantics: Tell the browser (and search engines) that this text has a special meaning – for example, <strong> means “important content”, and <em> means “emphasis”.

2. Visual presentation: Browsers apply default styles to these tags (like bold or italic), but you can further customize them with CSS.

⚠️ Note: Early HTML used <b> for bold and <i> for italic – they only control style, with no semantics. Modern Web standards (W3C) recommend using the semantic tags <strong> and <em> whenever possible, unless you truly need purely visual effects.

Common formatting tags at a glance

The table below lists the most commonly used HTML formatting tags and their purpose:

How to use them correctly?

• Bold text: Use <strong> if you want to express importance; use <b> if you only need visual boldness (e.g., a lead sentence at the beginning of an article).

• Italic text: Use <em> for stressed emphasis; use <i> for book titles, foreign words, or technical terms.

• Deleted and inserted: When showing document revision history, wrap deleted text with <del> and inserted text with <ins>.

• Subscript and superscript: Mathematical formulas and chemical equations rely on <sup> and <sub>.

• Highlight: Use <mark> to mark keywords in search results or draw the reader’s attention.

• Code: When you mention a piece of code in your tutorial (e.g., the <p> tag itself), wrap it with <code> so readers recognize it as code.

Common mistakes to avoid

• ❌ Abusing <strong> and <em> just to get bold or italic effects (e.g., making an entire paragraph bold – there’s no “importance” left).

• ❌ Using <i> instead of <em> to express strong emphasis.

• ❌ Forgetting nesting rules: formatting tags can be nested, for example <strong>Very important <em>and emphasized</em> content</strong> – browsers will render it correctly.

• ✅ Correct approach: Choose tags based on semantics, not just visual appearance. If you only need styling, prefer using CSS properties like font-weight or font-style instead of presentational tags.

Summary

Mastering HTML formatting tags makes your web content both semantically clear and easy to read. Search engines better understand what is important, and assistive technologies (such as screen readers) will read <em> and <strong> with different intonations.