TIL the <b> and <i> tags are semantic in HTML5

For years I treated <b> and <i> as presentational leftovers and reached for <strong> and <em> instead. Turns out HTML5 gave them actual meaning, they’re no longer just “make it bold/italic”.

The distinction is about intent:

• <strong> conveys importance, seriousness, or urgency.
• <em> marks stress emphasis that changes the meaning of a sentence.
• <b> draws attention to text for utilitarian reasons without extra importance, e.g. keywords in an abstract, product names in a review, or an article lede.
• <i> represents an alternate voice or mood, e.g. a taxonomic name, a technical term, an idiomatic phrase from another language, a thought, or a ship name.

So the title of a book or a species name is a job for <i>, not <em>:

The <i>Felis catus</i> is a small carnivorous mammal.

Same glyphs on screen, but <b> and <i> say “this text is set apart” while <strong> and <em> say “this text matters more”. Picking the right one keeps the markup meaningful for screen readers and anyone parsing the document.