HTML Formatting

HTML Formatting: Semantic and Visual Text Tags

HTML formatting elements style words or phrases inside text while conveying specific meaning to browsers and assistive tools. Choosing the right semantic tag tells screen readers when text carries urgency, emphasis, or edits rather than simple visual decoration.

Semantic Emphasis vs. Visual Offset

Modern HTML separates semantic tags from purely presentational tags. Although strong and b both display bold text visually, strong marks critical or urgent warnings, whereas b highlights keywords like product names without extra vocal stress.

Similarly, em adds spoken stress emphasis that changes how a sentence reads aloud, while i marks technical terms, foreign phrases, or ship names in italic text.

Practical Formatting Tags Example

HTML includes several specialized inline formatting elements for notes, revisions, math, and chemistry:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Text Formatting</title>
</head>
<body>
    <p><strong>Warning:</strong> Always back up your database before running migrations.</p>
    <p>You <em>must</em> restart the server for environment changes to apply.</p>
    <p>Search match: <mark>HTML formatting</mark> improves document clarity.</p>
    <p>Sale price: <del>$49</del> <ins>$29</ins></p>
    <p>Water formula is H<sub>2</sub>O and squares write as x<sup>2</sup>.</p>
    <p><small>Offer ends Friday at midnight UTC.</small></p>
</body>
</html>

Use del for deleted text, ins for newly inserted text, sub for chemical subscripts, sup for exponents or footnotes, and small for legal side comments.

Common Mistakes to Avoid

• Using b and i everywhere: Default to strong when text is genuinely important and em when stressing a word changes meaning.
• Using u for regular emphasis: Underlined text confuses visitors because web browsers associate underlines with clickable links.
• Replacing headings with strong tags: Keep section titles in h2 or h3 tags rather than bolding a standalone paragraph.

Frequently Asked Questions

What is the difference between strong and b in HTML?

Both render bold text by default, but strong signals serious importance to screen readers while b only draws visual attention to words.

How do I write superscripts and subscripts in HTML?

Wrap exponents or ordinal suffixes in sup tags and chemical or mathematical subscripts in sub tags.