Web Standards
Presentation Elements and Web Standards
Separating content from presentation, and what <b> and <i> actually mean in a post-CSS, semantic HTML5 world.
Separating content from presentation, and what <b> and <i> actually mean in a post-CSS, semantic HTML5 world.
For a while, the received wisdom was blunt: <b> and <i> are evil, presentation belongs in CSS, and any tag that smells like styling should be exiled from your markup. The instinct was right, the execution was too crude, and HTML5 quietly corrected it by redefining these old tags to mean something after all. Understanding that redefinition is a small masterclass in separating content from presentation properly.
The core idea is sound and worth restating: HTML describes what content is; CSS describes how it looks. Structure and meaning live in the markup; color, spacing, weight, and font live in the stylesheet. This separation is what lets one document adapt to a phone, a screen reader, a printer, and a reader mode without rewriting the content.
The old presentational elements violated this. <font>, <center>, and the bgcolor attribute baked appearance into structure, and HTML5 rightly declared them non-conforming. Good riddance — that's genuinely presentation masquerading as content.
Here's the twist. Instead of deleting <b> and <i>, HTML5 kept them and gave them semantic definitions divorced from their appearance. They no longer mean "make this bold" or "make this italic"; they mean a specific kind of textual distinction that conventionally renders that way.
<strong> — strong importance, seriousness, or urgency. The meaning is emphasis of consequence.<em> — stress emphasis that changes the sentence's meaning, like a spoken inflection.<b> — text drawn to attention without extra importance: keywords, product names, a lead sentence.<i> — text in an alternate voice or mood: a taxonomic name, a foreign phrase, a thought, a ship's name.
<strong>is about importance;<b>is about attention.<em>changes meaning;<i>changes voice.
The distinction has teeth because a screen reader may treat <strong> and <em> differently from <b> and <i>. Reach for the one whose meaning fits:
<p><strong>Warning:</strong> do not touch the exposed wire.</p>
<p>The <i>Endeavour</i> departed at dawn.</p>
<p>We <em>strongly</em> disagree — note the emphasis.</p>
<p>Search for the <b>keyword</b> in the results.</p>And if you simply want something to look bold or italic for purely visual reasons with no semantic content at all? That's a CSS job — font-weight or font-style on a class — not a tag.
The original "presentation belongs in CSS" was a healthy overcorrection for a web drowning in <font> tags. HTML5 restored the nuance: presentation still belongs in CSS, but a few visually-associated elements earned their place by carrying meaning. Choose your inline elements by what the text is — important, emphasized, notable, or set apart — and let the stylesheet decide what that looks like. That's separation of concerns done with a scalpel instead of a hatchet.