Styling Text in HTML: Using Formatting Elements for Improved Readability and Accessibility

Learn how to effectively style text in HTML using semantic formatting elements like `<strong<`, `<em<`, `<b<`, `<i<`, `<mark<`, `<small<`, `<del<`, and `<ins<`. This tutorial explains their distinct purposes, emphasizing the importance of semantic markup for improved readability, accessibility, and SEO.

Styling Text in HTML: A Guide to Formatting Elements

HTML Formatting Elements

HTML provides several elements for styling text, giving you more control over the visual presentation of your content than using only plain text. These formatting elements add semantic meaning and structure to your HTML, improving both readability and accessibility. While you could achieve some similar visual effects using CSS, these HTML elements add semantic meaning and are preferred over only using CSS for styling.

Bold and Strong Emphasis

Both <b> and <strong> display text in bold, but they have different semantic meanings. <b> indicates bold styling without implying importance; <strong> conveys strong importance.

Example: Bold and Strong

<p><b>This text is bold.</b></p>
<p><strong>This text is important!</strong></p>

Italic and Emphasized Text

Both <i> and <em> typically render text in italics, but again have different semantic meanings. <i> indicates italic styling without implying emphasis; <em> means emphasized text (screen readers might pronounce it with more stress).

Example: Italic and Emphasized

<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>

Other Formatting Elements

  • <small>: Renders smaller text.
  • <mark>: Highlights text (often with a yellow background).
  • <del>: Indicates deleted text (usually shown with a strikethrough).
  • <ins>: Indicates inserted text (usually shown underlined).
  • <sub>: Creates subscript text (e.g., H2O).
  • <sup>: Creates superscript text (e.g., x2).
Example: Various Formatting Elements

<p>This is <small>smaller</small> text.</p>
<p>This text is <mark>highlighted</mark>.</p>
<p>This text is <del>deleted</del>.</p>
<p>This text is <ins>inserted</ins>.</p>
<p>H<sub>2</sub>O</p>
<p>x<sup>2</sup></p>