HTML Text Formatting
HTML provides a series of tags for formatting text, giving them special styles or semantic meanings. These tags can be divided into two categories: physical tags (focused on visual presentation) and logical tags (focused on semantic meaning).
In modern web development, we recommend using logical tags with semantic meaning and leaving pure style control to CSS.
Physical Tags vs. Logical Tags
| Physical Tag (Style) | Logical Tag (Semantic) | Description & Difference |
|---|---|---|
<b> | <strong> | Bold. <b> (Bold) just makes text bold, while <strong> (Strong Importance) emphasizes the text's importance. Screen readers will stress <strong> content. |
<i> | <em> | Italic. <i> (Italic) just makes text slanted, while <em> (Emphasis) indicates emphasis. Screen readers will read <em> content with stress. |
<u> | <ins> | Underline. <u> (Underline) just adds an underline, while <ins> (Inserted Text) indicates inserted text in a document. |
<s> | <del> | Strikethrough. <s> (Strikethrough) just adds a strikethrough, while <del> (Deleted Text) indicates deleted text in a document. |
Best Practice: Prefer logical tags like <strong> and <em> because they provide both visual styling and semantic information, which is better for SEO and accessibility.
Common Formatting Tag Examples
Bold and Strong
<p>This is a normal paragraph.</p>
<p><b>This is bold text.</b></p>
<p><strong>This is important text.</strong></p>Italic and Emphasis
<p><i>This is italic text.</i></p>
<p><em>This is emphasized text.</em></p>Marked or Highlighted Text
Use the <mark> tag to highlight text, like marking with a highlighter.
<p>Don't forget to buy <mark>milk</mark> today.</p>Small Text
The <small> tag is used to define smaller text, often used for copyright information or footnotes.
<p><small>Copyright © 2024</small></p>Deleted and Inserted Text
<del> and <ins> are often used together to show editing and revision history in documents.
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>Browsers typically add a strikethrough to <del> and an underline to <ins>.
Subscript and Superscript
<sub>(Subscript) is used to define subscript text, commonly used in chemical formulas or mathematical expressions.<sup>(Superscript) is used to define superscript text, commonly used in footnotes or mathematical exponents.
<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>The famous formula E = mc<sup>2</sup>.</p>