HTML Text Formatting Guide
The Power of Emphasis
Written text relies on formatting to do what tone of voice does in speech - to flag that one word matters more than the others, that something is technical jargon rather than ordinary language, that this price has been crossed out and replaced. HTML gives you a small set of inline elements for exactly this, but there's a distinction worth understanding early: some of them are semantic, meaning they carry actual meaning about why the text is formatted that way, and some are purely presentational, meaning they just change how it looks. Getting this distinction right makes your pages more accessible, more SEO-friendly, and honestly just better structured.
Key Concepts
Semantic tags- Tags that change both appearance and meaning - they tell browsers, screen readers, and search engines why the text is being formatted, not just how.Physical tags- Tags that change only how text looks, with no information about why. Useful in specific cases but should not be the default choice.Inline elements- These formatting tags are all inline elements - they flow within paragraph text rather than starting on their own line.
Semantic vs Physical Formatting: A Critical Distinction
The difference between strong and b is not what they look like - both render bold text by default. The difference is what they say about the content. Strong tells the browser, the screen reader, and the search engine that this text is actually important. b tells them nothing except to make it look bold. Screen readers may announce strong text with a different vocal emphasis. Search engines may weight it slightly differently. A purely sighted user sees no difference, but the semantic information travels with the content everywhere it goes.
1<!-- Semantic tags that carry meaning -->
2<p><strong>Warning:</strong> This action is critical.</p>
3<p>I <em>really</em> mean it.</p>
4
5<!-- Physical tags for visual styling only -->
6<p>This is <b>bold</b> but not necessarily important.</p>
7<p>This is <i>italic</i> for stylistic effect.</p>Key Differences
Semantic tags- Communicate meaning and context to assistive technologies and search engines, not just appearance.Physical tags- Affect only visual presentation - no meaning is carried to screen readers or crawlers.Default preference- When a semantic tag accurately describes your intent, use it over the physical equivalent.
strong (Semantic)
The strong element marks text as having strong importance, seriousness, or urgency - and those are meaningfully different from one another even if the rendering is the same. A warning label uses strong for urgency. A contract term uses it for importance. A spoiler warning uses it for seriousness. Screen readers may shift vocal emphasis for strong text, which is why choosing it over b matters for users who can't see the bold styling.
1<p><strong>Warning:</strong> This action cannot be undone.</p>
2<p>You <strong>must</strong> complete all fields before submitting.</p>Key Features
Semantic meaning- Marks text as having genuine importance, seriousness, or urgency - not just visual weight.Accessibility- Screen readers may use a different vocal emphasis for strong content.Use cases- Warnings, required fields, critical alerts, terms that must not be missed.
b (Physical)
The b element draws visual attention to text without implying any added importance. The HTML5 spec describes it as text that would be typographically offset in print without conveying extra emphasis - things like product names in a review, key terms in a summary, or technical identifiers you want to stand out visually. Use it when you want bold text but strong would be semantically misleading.
1<p>The <b>quantum flux capacitor</b> is the key component of the device.</p>
2<p>She was known for her <b>joie de vivre</b>.</p>Key Features
Presentational only- Adds visual weight without semantic importance - screen readers treat it as normal text.Use cases- Keywords in a summary, product names, technical terms being introduced, stylistic offset.When not to use it- If you're reaching for b just to make decorative text bold, CSS font-weight is the better tool.
em (Semantic)
The em element is the semantic emphasis tag, and it does something interesting: it changes the meaning of a sentence depending on which word you put it on. The three code examples below say the same words but mean very different things because of where the em sits. That stress-shifting behavior is exactly what em communicates to screen readers - they're supposed to read emphasized text with vocal stress, the way you'd read it aloud if you meant to emphasize that particular word.
1<!-- These three sentences have different meanings -->
2<p>I <em>love</em> driving my car.</p>
3<p>I love <em>driving</em> my car.</p>
4<p>I love driving <em>my</em> car.</p>Key Features
Semantic stress- Shifts the emphasis in a sentence, subtly changing what the sentence means.Accessibility- Screen readers add verbal stress to em content - the spoken equivalent of italics.Use cases- Any word that you'd verbally emphasize if reading the sentence aloud.
i (Physical / Alternate Voice)
The i element marks text in an alternate voice or mood - a different register from the surrounding prose. In HTML5 it's technically semantic but its meaning is narrower and more specific than em: it's for text that would be typeset in italics for conventional reasons, like foreign words, technical terms being introduced, titles of works, or character thoughts in fiction. It's not for general emphasis - that's what em is for.
1<p>The term <i>et cetera</i> is often abbreviated as <i>etc.</i></p>
2<p>The ship <i>USS Enterprise</i> sailed into the bay.</p>
3<p>She thought to herself, <i>What a beautiful day!</i></p>Key Features
Alternate voice- Marks text in a different register - foreign words, technical terms, internal thoughts, vessel names.Distinction from em- em is for stress emphasis that changes sentence meaning. i is for conventional typographic italics.HTML5 note- Given specific semantic meaning in HTML5 rather than being purely presentational.
mark (Highlighted Text)
The mark element represents text highlighted for reference - specifically text that's relevant in a context other than the one it was written in. The clearest use case is search results: when a user searches for a term and you highlight that term on the page, mark is semantically correct because you're highlighting text that's relevant to the user's context rather than inherently important in the document. The default yellow background is very recognizable for this purpose.
1<p>Search results for "HTML formatting":</p>
2<p>This guide will teach you all about <mark>HTML formatting</mark> tags and their use.</p>Key Features
Contextual relevance- Marks text as relevant to the current context - typically a search query or annotation.Default styling- Yellow background in most browsers, easily overridden with CSS.Use cases- Search term highlighting, annotation tools, flagging relevant content in reference material.
small (Side Comments)
The small element is semantic for a specific type of content: side comments, caveats, legal fine print, and copyright notices. It's not simply a way to make text smaller - that's what CSS font-size is for. The distinction matters because screen readers and search engines understand that content in small is ancillary, a footnote to the main content rather than part of it. Copyright footers and pricing caveats are the most common places you'll see it used correctly.
1<p><small>© 2023 Your Company Name. All Rights Reserved.</small></p>
2<p>Price: $99.99 <small>(excl. tax)</small></p>Key Features
Semantic meaning- Marks content as a side comment or fine print - ancillary to the main content, not just visually smaller.Default styling- Renders one font size smaller than the parent element.Use cases- Copyright notices, legal disclaimers, pricing caveats, licensing information.
del (Deleted Text)
The del element marks text that has been removed from a document. It's a semantic record of deletion rather than just a visual strikethrough effect. The most useful application outside of document editing is e-commerce pricing - showing the original price with a strikethrough next to a sale price is instantly readable and del is the semantically correct way to mark the original as no longer current. Screen readers may announce del content as deleted text.
1<p>My favorite color is <del>blue</del> red.</p>
2<p>Sale: <del>$199.99</del> $149.99!</p>Key Features
Semantic meaning- Marks text as having been removed - not just struck through visually.Default styling- Strikethrough in all browsers.Use cases- Document revisions, change tracking, original pricing shown alongside sale pricing.
ins (Inserted Text)
The ins element is the counterpart to del - it marks text that has been added to a document. The two are often used together in document comparison views where you want to show what was removed and what replaced it. On its own ins is also useful for showing a new price after del has marked the old one, creating the standard sale pricing pattern you see everywhere in e-commerce.
1<!-- Document change example -->
2<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
3
4<!-- Sale pricing example -->
5<p>Was: <del>$199.99</del> Now: <ins>$149.99</ins></p>Key Features
Semantic meaning- Marks text as having been added to a document.Default styling- Underline in all browsers - which is why it's not ideal for decorative underlines.Use cases- Document revisions, change tracking, new pricing alongside del-marked old pricing.
sub (Subscript)
The sub element renders text below the baseline in a smaller size - the position used for subscript in typography. The practical use cases are narrow but specific: chemical formulas where the element counts sit below the line, mathematical notation with subscript variables, and occasionally footnote references. Using sub for decorative positioning rather than actual subscript content would be misuse.
1<p>The chemical formula for water is H<sub>2</sub>O.</p>
2<p>The variable X<sub>n</sub> represents the nth element.</p>Key Features
Positioning- Renders text below the text baseline, roughly half a character lower.Font size- Browsers render subscript text smaller than the surrounding text.Use cases- Chemical formulas (H2O, CO2), mathematical subscripts, footnote numbers.
sup (Superscript)
The sup element is the counterpart to sub - it renders text above the baseline in a smaller size. Footnote references, mathematical exponents, and ordinal suffixes (1st, 2nd) are the standard use cases. Same principle applies as with sub: use it when superscript is typographically correct for the content, not as a shortcut for positioning text higher on the line for visual effect.
1<p>This sentence requires a footnote.<sup>1</sup></p>
2<p>2<sup>3</sup> equals 8.</p>
3<p>She finished in 1<sup>st</sup> place.</p>Key Features
Positioning- Renders text above the text baseline, roughly half a character higher.Font size- Browsers render superscript text smaller than the surrounding text.Use cases- Footnote references, mathematical exponents (x squared, 10 cubed), ordinal suffixes.
Best Practices for Using Formatting Tags
The main habit to build: choose semantic over physical when the semantic tag accurately describes the content. If the text is actually important, use strong. If you're adding emphasis that changes sentence meaning, use em. If you just want something to look bold for aesthetic reasons - a section title in a sidebar, a brand name in some interface copy - use CSS on a span instead of misusing strong or b. The second habit is restraint: a page where strong appears fifty times has lost all its signal value. These tags work through contrast with unmarked text around them.
1<!-- Combined semantic formatting -->
2<p>This is <strong><em>very important and emphasized</em></strong> text.</p>
3
4<!-- Semantic tags with other formatting -->
5<p>E = mc<sup>2</sup> is <mark>Einstein's most famous equation</mark>.</p>
6
7<!-- CSS for purely decorative bold -->
8<span class="product-name">Product Name</span>
9/* In CSS: .product-name { font-weight: bold; } */Key Guidelines
Semantic when accurate- Use semantic tags when they correctly describe the content - not just to achieve a visual effect.CSS for decoration- When you want bold or italic for purely visual reasons with no semantic meaning, use CSS.Nesting works- You can nest formatting tags for combined effect - strong inside em is valid and meaningful.Use sparingly- Overuse dilutes impact. These tags work through contrast with unstyled text.
Formatting with Intention
The semantic/physical distinction is the thing that separates developers who understand HTML from those who are just making things look right visually. Strong and em exist because importance and emphasis are real concepts that travel with content into screen readers, into search indexes, into contexts where visual rendering doesn't exist at all. Using them correctly costs nothing extra - the typing is the same - and the benefit accumulates quietly across every user who encounters your content in a non-visual way. Sub, sup, del, ins, mark, and small each have their narrow correct uses, and getting those right is a matter of understanding what the element means rather than just what it looks like