HTML Basics
HTML Text Formatting
HTML includes many tags to format text: bold, italic, highlighted, superscript, and more. Some carry meaning (semantic) while others only change appearance.
Common Formatting Tags
<p><strong>Important</strong> and <b>bold</b> text.</p>
<p><em>Emphasised</em> and <i>italic</i> text.</p>
<p><mark>Highlighted</mark> text.</p>
<p>H<sub>2</sub>O and E = mc<sup>2</sup>.</p>
<p><del>Removed</del> and <ins>added</ins> text.</p>
<p><small>Fine print</small> text.</p>Semantic vs Visual Tags
Some tags describe meaning while others only change looks. Prefer the semantic versions because they help search engines and screen readers.
| Tag | Effect | Meaning |
|---|---|---|
| <strong> | Bold | Strong importance (semantic) |
| <b> | Bold | Just visually bold (no importance) |
| <em> | Italic | Stressed emphasis (semantic) |
| <i> | Italic | Alternate voice or term (visual) |
| <mark> | Highlight | Marked or highlighted for reference |
| <sub> / <sup> | Subscript / Superscript | Below or above the baseline |
💡
Use <strong> and <em> when the text truly matters or should be stressed. Use CSS for purely visual styling instead of misusing tags like <b> or <i>.