Level:Beginner

HTML Typography

HTML typography elements are used to format and emphasize text. Some elements change how text looks, while others add meaning for accessibility and SEO.

What is HTML Typography?

  • HTML typography refers to elements that control text emphasis, importance, and meaning.
  • Typography elements are usually inline elements, meaning they do not start on a new line.
  • Some typography tags are semantic (they convey meaning), while others are visual-only.

Semantic vs Visual Formatting

  • <strong> — indicates strong importance (SEO & accessibility aware).
  • <em> — indicates emphasis that changes sentence meaning.
  • <b> — makes text bold (visual only).
  • <i> — makes text italic (visual only).
  • Prefer semantic elements when meaning matters.

Common Typography Elements

  • <mark> — highlights text.
  • <small> — displays fine print or secondary text.
  • <sub> — subscript text (H2O).
  • <sup> — superscript text (x2).

Typography Example

HTML Typography Examplehtml
<!-- Semantic typography -->
<p>This text is <strong>important</strong> and should be emphasized.</p>
<p>This text is <em>emphasized</em> and changes meaning.</p>

<!-- Visual-only formatting -->
<p>This text is <b>bold</b> and <i>italic</i>.</p>

<!-- Additional typography -->
<p>This is <mark>highlighted</mark> text.</p>
<p>This text is <small>smaller</small>.</p>
<p>H<sub>2</sub>O and E = mc<sup>2</sup></p>

Preview

localhost:3000
Loading preview...