<strong> versus <b> versus <em> versus <i>

Here we are, at the doors of the great war of semantic inline elements. So who's right between <strong> and <b>? Who wins between <em> and <i>?

Well, they all win.

Everyone is a winner excepts us the developers who have to implement this. Let's try to explain this strange situation.

Imagine a website for a touristic area with a cliff:

• The <b> tag is used to draw the reader's attention. So it should draw attention to the cliff: "This wonderful area has a forest but also a wonderful cliff".
• The <strong> tag is to indicate the importance and seriousness of something. So it should warn people about the cliff: "Please be careful near the cliff as there are no ramps to prevent you from falling and the winds are strong".
• The <i> tag is used to indicate that something is set off from the normal prose. For example it should be used for the foreign name of the cliff: "This cliff name is mh'irr'la" or the thoughts of someone thinking about the cliff: "Is the cliff really in love with me or is it just a farce? thought Jonathan".
• The <em> tag is used to stress something on the subject, almost as if you speak it aloud. So it should help denote something about the cliff: "Ah yes, the cliff, the one that is actually 2 meters tall".

I hope it makes sense. The sad reality is that no one writes prose in HTML, so you'll probably be stuck with whatever the wysiwyg editor or markup language parser of your choice decided to use. For example this page is written using Kaku who compiles to <strong> and <em> by default.

Next: Other kinda useful semantic elements