HTML Formatting

Introduction

Text formatting elements — strong, em, mark, small, sub, sup — carry meaning beyond bold and italic. Google and screen readers treat semantic emphasis differently from b and i. BBC editorial HTML uses em for stress and strong for importance, not for CSS hooks alone.

Business problem

Presentational b/i everywhere loses semantic signals for AT and translation glossaries. Legal disclaimers in small without semantic small element may be ignored by screen readers when CSS shrinks generic spans.

• Compliance: Terms in strong must be programmatically distinguishable for low-vision zoom users.
• SEO: Emphasis tags don't spam-rank but clarify entity relationships in prose.
• i18n: Translation memory uses inline tags — wrong tag choice breaks TM matching.

Why this feature exists

Separate meaning from appearance: HTML4 b/i were presentational; HTML5 redefined strong/em as semantic with b/i for typographic cases without importance.

• History: Physical markup (bold, italic) evolved to logical (strong, em).
• mark: Added in HTML5 for highlighted search terms — accessibility name "mark".
• sub/sup: Chemical formulas and footnotes need baseline semantics, not CSS-only shift.

Browser internals

Phrasing elements map to inline boxes in layout. strong/em have default font-weight/font-style but AT uses role and name — not computed style. mark has default background color in user-agent stylesheet.

• Accessibility: strong → strong importance; em → stress emphasis — announced differently in some AT.
• Nesting: em inside strong valid; excessive nesting complicates translation.
• Parser: Auto-closing rules for mis-nested formatting similar to other phrasing content.

<strong> → font-weight:bold + semantic importance
<em> → font-style:italic + semantic stress
<mark> → background highlight, role implicit

Rendering workflow

Inline formatting participates in line layout — nested strong/em don't create new blocks. Font synthesis on Android may fake bold when family lacks weight — affects visual but not semantics.

• Paint: mark background extends full line height — adjust padding in CSS carefully.
• Hyphenation: sub/sup in paragraphs affect line box height — watch CLS in scientific content.
• Font loading: Italic face swap on em causes micro CLS — use size-adjust.

Feature deep dive

Choose by meaning: strong for importance, em for stress, mark for relevance highlight, small for side comments/legal, sub/sup for formulas and references. Use b/i only when typographic convention lacks semantic weight (product names, foreign words).

• Don't: Wrap whole paragraphs in strong for "bold paragraph" — use CSS.
• mark: Search results page highlights query terms — remove overuse for SEO keyword paint.
• small: Fine print still readable — not for hiding text from users.

<p>
  <strong>Free shipping</strong> applies to orders over <em>£50</em> today only.
  <small>Excludes marketplace sellers. <a href="/terms">Terms apply</a>.</small>
</p>
<p>H<sub>2</sub>O capacity: 500 ml. See footnote<sup>1</sup>.</p>

Accessibility analysis

Screen readers may change voice for em/strong — overuse fatigues users. mark announcements vary by AT — provide context in surrounding text. small text must meet contrast minimum even when visually smaller.

• WCAG 1.4.3: small at 80% must still pass contrast on background.
• Color: mark default yellow may fail contrast — customize in CSS.
• Abuse: strong on every keyword — auditory noise, no SEO benefit.

SEO impact

Semantic emphasis modestly helps content understanding; keyword bold spam triggers quality demotion. Google ignores hidden small text keyword stuffing — cloaking penalty.

• Snippets: em around brand names doesn't create rich results alone.
• Quality: Natural strong for offers beats artificial mark highlighting.
• Structured data: Formatting tags don't replace JSON-LD for products.

Security considerations

Nested formatting in UGC is low direct XSS risk if tags allowlisted — risk is tag injection breaking out of attribute context. Sanitizers allow strong/em/mark, strip on* handlers.

• Phishing: strong "Verify account" in injected comment — social engineering, not XSS if text encoded.
• CSS: Inline style on mark from paste — sanitize.
• HTML injection: Unclosed em breaking rest of page layout — encode user text nodes.

Performance impact

Minimal perf impact — inline phrasing tags are lightweight. Perf issues come from wrapping thousands of search hits in mark via JS — batch DOM updates.

• DOM: Highlighting every query term in 10k word doc — use TreeWalker carefully.
• Paint: Many mark elements — single composite layer usually fine.
• SSR: Server-side mark for search terms — no client flash.

Real production example

Google Search results snippet highlighting uses mark internally in some UIs; merchant pages should highlight search terms only when user arrives from search — avoid permanent keyword mark.

• BBC articles: em for reported speech, strong for key facts.
• Stripe docs: code in code, strong for warnings, not for navigation labels.
• Amazon: small for legal under price — semantic small element.

<p><mark>Webhook</mark> delivery failed. Retry from the Dashboard.</p>

Enterprise usage

Style guides document when to use strong vs b. CMS toolbar exposes "Important" (strong) not "Bold" (b) for prose blocks. Linter flags b/i in JSX copy components.

• Legal: Mandatory strong on binding phrases — template enforced.
• Localization: TM preserves strong/em tags across languages.
• CI: Custom rule — no mark in static SEO body copy.

Common production failures

SEO "optimization" wrapped every keyword in strong on 8k SKU pages — quality rater flagged keyword stuffing; traffic recovered after semantic cleanup.

• A11y: All links wrapped in strong — confusing emphasis announcements.
• Contrast: mark styling invisible in dark mode — users missed highlighted errors.
• Translation: em nesting order broke Arabic grammar in automated export.

Architecture review questions

• Is strong/em used for meaning, not presentation?
• Does small text still meet WCAG contrast requirements?
• Are mark highlights meaningful without color alone?
• Is keyword emphasis natural or spam-like for SEO quality?
• Are sub/sup used for formulas, not CSS baseline hacks?
• Does sanitization allowlist match formatting tags in UGC?

Hands-on project

Audit product copy template — replace presentational b/i with strong/em where appropriate; fix mark usage on error messages; run axe contrast on small print.

• Deliverable: Tag usage style guide addendum.
• Verify: Screen reader read-through of emphasized legal paragraph.
• Stretch: ESLint rule for b/i in user-facing strings.

Interview questions

Try it yourself

Edit the HTML, CSS, or JS panels — the preview updates as you type.

Summary

Text formatting elements encode emphasis and ancillary meaning in HTML. Staff writers and engineers at BBC and Google align tag choice with semantics, accessibility, and translation pipelines — not with bold buttons in WYSIWYG toolbars.