Semantic HTML is about making the meaning of your use of HTML clear, of particular importance when it’s being read by machines with very little idea of style or context.
For example, if we use the <i> tag to italicise a phrase, a human being reading it can probably tell why by context. We use italics to emphasise stuff, we use them for onomatopoeia, we use them for quotations, and captions. But how is a machine going to tell which of these we’re going for?
So if we’re using italics for emphasis, it’s better to be explicit about this — to use the <em> tag instead. We can adjust our css for this to make stuff visually italicised, with the same result on the page, but anyone looking at the code, and especially machines, now know what’s up.
written with Benjamina Bollag