HTML Β· Chapter 9 of 45
HTML Text Formatting
HTML offers several tags for formatting text semantically, like <b> and <strong> for bold, <i> and <em> for italics, and <mark> for highlighting.
While <b> and <i> only apply visual styling, <strong> and <em> also convey semantic meaning (importance and emphasis), which matters for accessibility and SEO.
Syntax
<strong>important</strong> <em>emphasized</em>Bold vs strong, italic vs emphasis
<b> and <i> are purely visual. <strong> implies strong importance and <em> implies emphasis β screen readers may change their tone for these.
Other formatting tags
<mark> highlights text, <small> reduces size, <del> shows deleted text, <ins> shows inserted text, and <sub>/<sup> handle subscript and superscript.
Example 1 (html)
<p>This is <strong>very important</strong> and this is <em>emphasized</em>.</p>Output
This is very important and this is emphasized.Strong and em carry semantic meaning beyond just bold/italic styling.
Example 2 (html)
<p>Water is H<sub>2</sub>O and E=mc<sup>2</sup>.</p>Output
Water is H2O and E=mc2 (with subscript/superscript)sub and sup shift text position for chemical formulas and exponents.
Key points
- <strong> and <em> carry semantic meaning; <b> and <i> are purely visual.
- <mark> highlights text with a yellow background by default.
- <sub> and <sup> render subscript and superscript text.
- <del> and <ins> show edited content in documents.
π‘ Note: Screen readers may audibly emphasize <strong> and <em> text differently than plain <b>/<i>.