html
/

HTML Text Formatting: Semantic Tags & Best Practices (Complete Guide)

Last Sync: Today

On this page

15
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Text Formatting: Semantic Tags & Best Practices (Complete Guide)

What is HTML Text Formatting?

HTML text formatting refers to using special tags to control the appearance and meaning of text content. Unlike CSS (which handles visual styling), HTML formatting tags often carry semantic meaning — they tell browsers, search engines, and screen readers why text looks a certain way, not just how it looks.

Quick Reference: All Formatting Tags

TagCategoryVisualSemantic MeaningExample
`<b>`PhysicalBoldNone (presentational only)`<b>Warning</b>`
`<strong>`SemanticBoldHigh importance/urgency`<strong>Danger</strong>`
`<i>`PhysicalItalicNone (presentational only)`<i>Foreign word</i>`
`<em>`SemanticItalicStress emphasis`<em>Really</em> important`
`<u>`PhysicalUnderlineNone (avoid for links)`<u>Misspelled</u>`
`<mark>`SemanticHighlightRelevance/search match`<mark>keyword</mark>`
`<small>`SemanticSmallerFine print/legal text`<small>Terms apply</small>`
`<del>`SemanticStrikethroughDeleted/removed content`<del>$100</del> $80`
`<ins>`SemanticUnderlineInserted/added content`<ins>New feature</ins>`
`<sub>`PhysicalSubscriptTypographic`H<sub>2</sub>O`
`<sup>`PhysicalSuperscriptTypographic`E=mc<sup>2</sup>`
`<code>`SemanticMonospaceComputer code`<code>console.log()</code>`
`<kbd>`SemanticMonospaceKeyboard input`Press <kbd>Ctrl</kbd>+<kbd>S</kbd>`
`<samp>`SemanticMonospaceProgram output`<samp>Error 404</samp>`
`<var>`SemanticItalicVariable name`<var>x</var> = 10`
`<abbr>`SemanticDotted underlineAbbreviation`<abbr title="Hypertext">HTML</abbr>`
`<cite>`SemanticItalicCitation/Reference`<cite>The Great Gatsby</cite>`
`<blockquote>`SemanticIndentedLong quotation`<blockquote>To be...</blockquote>`
`<q>`SemanticQuotation marksShort inline quote`<q>Hello</q>`

Semantic vs Presentational: The Critical Distinction

Understanding the difference between semantic (meaningful) and presentational (visual-only) tags is crucial for writing accessible, SEO-friendly HTML.

Presentational (Avoid for meaning)Semantic (Preferred)When to Use Each
`<b>``<strong>``<strong>` for importance (alerts, warnings). `<b>` only for visual bold without meaning (product names).
`<i>``<em>``<em>` for verbal stress. `<i>` for foreign words, technical terms, or thoughts.
`<u>``<ins>` or CSS`<u>` only for misspellings. Use CSS `text-decoration` for underlines.

Deep Dive: <strong> vs <b>

HTMLRead-only
1
<!-- ❌ Bad: Using <b> for important content -->
<p><b>Warning:</b> Your session will expire soon.</p>

<!-- ✅ Good: <strong> conveys importance to screen readers -->
<p><strong>Warning:</strong> Your session will expire soon.</p>

<!-- ✅ Acceptable use of <b>: No semantic importance -->
<p>The <b>iPhone 15</b> was released in 2023.</p>

Deep Dive: <em> vs <i>

HTMLRead-only
1
<!-- ❌ Bad: Using <i> for emphasis -->
<p>I <i>really</i> need this.</p>

<!-- ✅ Good: <em> adds stress emphasis -->
<p>I <em>really</em> need this.</p>

<!-- ✅ Acceptable <i> uses: Foreign words, thoughts, technical terms -->
<p>She said <i>au revoir</i> and left.</p>
<p>He thought to himself, <i>Is this real?</i></p>
<p>The <i>Felidae</i> family includes cats.</p>

Technical & Code Formatting Tags

These tags are essential for documentation, tutorials, and technical writing.

HTMLRead-only
1
<!-- Inline code -->
<p>Use the <code>console.log()</code> function to debug.</p>

<!-- Keyboard input -->
<p>Save your file by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

<!-- Program output -->
<p>The server returned: <samp>500 Internal Server Error</samp></p>

<!-- Mathematical variable -->
<p>The quadratic formula: <var>ax</var><sup>2</sup> + <var>bx</var> + <var>c</var> = 0</p>

<!-- Preformatted code block (preserves spacing) -->
<pre><code>
function greet(name) {
    return `Hello, ${name}!`;
}
</code></pre>

Quotations & Citations

HTMLRead-only
1
<!-- Short inline quote -->
<p>Steve Jobs said, <q>Stay hungry, stay foolish.</q></p>

<!-- Block quote with citation -->
<blockquote cite="https://example.com/source">
    <p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
    <footer>— Albert Einstein, <cite>Attributed</cite></footer>
</blockquote>

<!-- Citation for creative work -->
<p>My favorite book is <cite>To Kill a Mockingbird</cite> by Harper Lee.</p>

Edits & Changes: <del> and <ins>

HTMLRead-only
1
<!-- Price change -->
<p>Was: <del>$99.99</del> Now: <ins>$79.99</ins></p>

<!-- Document revision tracking -->
<p>Version 2.0: <del>Removed feature X</del> <ins>Added feature Y</ins></p>

<!-- With datetime attribute for precision -->
<p><del datetime="2026-04-01">Old policy</del> <ins datetime="2026-04-06">New policy effective immediately</ins></p>

Abbreviations & Definitions

HTMLRead-only
1
<!-- Abbreviation with tooltip -->
<p>I work with <abbr title="Cascading Style Sheets">CSS</abbr> daily.</p>

<!-- Definition on first use -->
<p><dfn>HTML</dfn> (HyperText Markup Language) is the standard markup language for documents.</p>

<!-- Address contact info -->
<address>
    Written by <a href="mailto:john@example.com">John Doe</a>.<br>
    Visit us at: 123 Main St, Anytown, USA
</address>

Real-World Example: Blog Post with Rich Formatting

HTMLRead-only
1
<article>
    <h1>Getting Started with <abbr title="HyperText Markup Language">HTML</abbr></h1>
    
    <p><strong>Important:</strong> Always use semantic tags for better <em>accessibility</em>.</p>
    
    <p>According to the <cite>MDN Web Docs</cite>, semantic HTML is a <mark>best practice</mark>.</p>
    
    <h2>Keyboard Shortcuts</h2>
    <p>In VS Code, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> to open the command palette.</p>
    
    <h2>Example Code</h2>
    <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;My Page&lt;/title&gt;
    &lt;/head&gt;
&lt;/html&gt;</code></pre>
    
    <h2>Pricing Update</h2>
    <p><del>$199</del> <ins>$149</ins> <small>Limited time offer</small></p>
    
    <blockquote cite="https://www.w3.org/TR/html52/">
        <p>The HTML standard defines the structure and semantics of HTML documents.</p>
        <footer>— <cite>W3C HTML Specification</cite></footer>
    </blockquote>
</article>

Accessibility Considerations

  • Screen readers announce <strong> and <em> with altered tone/emphasis — use them intentionally
  • <b> and <i> receive no special announcement — purely visual
  • Don't use <u> for links — users expect underlined text to be clickable (use CSS for link styling)
  • <mark> helps users find search keywords — screen readers announce "highlighted"
  • <abbr> with title provides expansion — essential for accessibility
  • Never rely on visual formatting alone to convey meaning (color, bold, italics must have text alternatives)

Best Practices Summary

  • ✅ Use <strong> and <em> for semantic importance/emphasis
  • ✅ Use <b> and <i> sparingly — only when no semantic meaning is needed
  • ✅ Use <mark> to highlight relevant text (search results, quotes)
  • ✅ Use <code>, <kbd>, <samp> for technical content
  • ✅ Use <del> and <ins> for document revisions (not for styling)
  • ✅ Use <abbr> for all abbreviations on first occurrence
  • ✅ Use <cite> for creative work titles (books, articles, movies)
  • ✅ Use <blockquote> with cite attribute for quotations
  • ❌ Avoid <u> for anything other than misspellings
  • ❌ Don't use formatting tags just for visual effect — use CSS instead

Common Mistakes & Fixes

❌ Mistake✅ Fix
`<b>Important warning</b>``<strong>Important warning</strong>`
`<i>Really important</i>``<em>Really important</em>`
Underlining non-link text with `<u>`Use CSS `text-decoration: underline` or `<ins>` if appropriate
`<p><code>function</p></code>` (mismatched nesting)Always close tags in reverse order
Using `<strong>` inside headings unnecessarilyHeadings (`<h1>`-`<h6>`) already convey importance
Forgetting `title` attribute on `<abbr>`Always add `title` for screen readers

CSS Alternative: When to Use CSS Instead

For purely visual effects that carry no meaning, use CSS instead of HTML formatting tags.

CSSRead-only
1
/* Instead of <b> for visual bold */
.visual-bold {
    font-weight: 700;
}

/* Instead of <i> for visual italics */
.visual-italic {
    font-style: italic;
}

/* Instead of <u> for decorative underline */
.decorative-underline {
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* Instead of <mark> for custom highlighting */n    background-color: yellow;
    color: black;
}

Conclusion

HTML formatting tags go far beyond making text bold or italic. They provide semantic meaning that improves accessibility, SEO, and code maintainability. Use <strong> and <em> for meaning, <b> and <i> only when necessary, and leverage technical tags like <code>, <kbd>, and <abbr> for richer content. When in doubt, ask: "Does this formatting carry meaning, or is it just visual?" — if it's just visual, use CSS.

Try it yourself

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Formatting Demo</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; line-height: 1.6; }
        .demo { background: #f0f0f0; padding: 15px; border-radius: 8px; margin: 20px 0; }
    </style>
</head>
<body>
    <h1>HTML Formatting Demo</h1>
    
    <div class="demo">
        <p><strong>Strong:</strong> Important content</p>
        <p><em>Emphasis:</em> Stressed pronunciation</p>
        <p><mark>Mark:</mark> Highlighted text</p>
        <p><code>Code:</code> console.log()</p>
        <p><kbd>Kbd:</kbd> Press <kbd>Ctrl</kbd>+<kbd>C</kbd></p>
        <p>Water: H<sub>2</sub>O &nbsp;&nbsp; Math: x<sup>2</sup></p>
        <p><del>Deleted</del> <ins>Inserted</ins></p>
        <p><abbr title="HyperText Markup Language">HTML</abbr> is fun!</p>
    </div>
    
    <p><strong>Tip:</strong> Try modifying the code above to see each tag in action.</p>
</body>
</html>

Test Your Knowledge

Q1
of 5

Which tag should you use for text with high importance (e.g., a warning)?

A
<b>
B
<strong>
C
<i>
D
<mark>
Q2
of 5

Which tag indicates stress emphasis and changes screen reader tone?

A
<i>
B
<b>
C
<em>
D
<u>
Q3
of 5

Which tag is used to represent keyboard input (e.g., Ctrl+S)?

A
<code>
B
<samp>
C
<kbd>
D
<var>
Q4
of 5

What does the <mark> tag do?

A
Underlines text
B
Highlights text like a marker
C
Makes text smaller
D
Creates a citation
Q5
of 5

Which tag pair shows deleted and inserted text in documents?

A
<b> and <i>
B
<sub> and <sup>
C
<del> and <ins>
D
<code> and <pre>

Frequently Asked Questions

Should I use <b> or <strong>?

Use <strong> when the text has importance (warnings, key points). Use <b> only for visual bold without meaning (product names, keywords without emphasis).

What's the difference between <em> and <i>?

<em> indicates stress emphasis ("I really mean it") — screen readers change tone. <i> is for foreign words, thoughts, or technical terms without added emphasis.

Can I nest formatting tags?

Yes — <strong><em>Important and emphasized</em></strong> is valid. Screen readers will announce both.

Does <mark> affect SEO?

Indirectly. <mark> highlights relevant content (like search keywords). Google may consider marked text as relevant to the user's query.

When should I use <code> vs <pre>?

<code> is for inline code snippets. <pre> preserves whitespace/indentation. Use <pre><code> together for multi-line code blocks.

Is <u> deprecated?

No, but repurposed. In HTML5, <u> represents text with a non-textual annotation (misspellings, proper names in Chinese). Don't use it for underlining links or decorative underlines.

Previous

html headings

Next

html links

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.