HTML5: old tags new destination

Everyone knows that the tags <b> , <i> , <s> , <small> are presentational, and therefore, based on the paradigm of “structure, representation, behavior” their use is not welcome. The elements <strong> , <em> , <del> much more familiar. So it was for many years of development practice. However, much has changed in the semantics of these elements with the advent of HTML5 . Now we have 4 new tags with meaning and porridge in the head.

<b> vs <strong>

If earlier all textbooks on layout were full of phrases like “use <strong> instead of <b> ”, and this was half true, then today such a habit can play a malicious semantic joke. But the point is that the authors of HTML5 suggest using <b> to highlight excerpts of text in order to draw the attention of the reader, but without implying an increase in the significance of the text or intonation. The specification gives examples of use for marking keywords in a document.

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

and leads (the first paragraph of an article in journalism)

<article>
<h2>Kittens 'adopted' by pet rabbit</h2>
<p><b class="lede">Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.</b></p>
<p>Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.</p>
</article>

In turn, <strong> , as before, means the increased importance of its content.
')

<i> vs <em>

From now on, <i> contains text that stands out from the general environment, but does not have an emotional coloring. In my opinion, <i> it is logical to use where the typographical tradition implies italics (for example, words in a foreign language, terms, etc.)

<i>Per aspera ad Astra</i> — « ».

<em> means emphatic stress, an emotional focus on this passage of the text. This is the case when, in speech, we single out words with a voice (intonation, loudness, etc.)

<em></em>, .

Carefully read the contract!

"Text in small print" (information that is a legal formality, such as a company license or legal address, etc.) we, as a rule, marked the element with the class, which set a smaller font in visual user agents . Now, in our arsenal, a new old semantic element has appeared - <small> .

Holivar about <s>

Previously, <s> was nothing more than strikethrough text. Now <s> is information that has lost its relevance.
We also have a <del> element, the processing of which by default in visual user agents is strikethrough text. It means changes in the document, and at first glance their purpose may seem the same. However, there is a subtle point. Consider an example of a product page in an online store.
It can be indicated two prices, one of which is crossed out. We mark it with the element <s> . This means that the old price has lost its relevance (no matter when it was, the fact itself is important). How to check that not <del> ? <del> implies changes made to the document (it’s important that at some point in time the document was changed ). In our case, the new document already contains irrelevant information.

New semantics and old doctype

If for some unknown reason you cannot replace the doctype with a new one and formally type in HTML 4.01 - do not despair. Use the old new elements with a new meaning and in time you will say “thank you” to yourself. Perhaps someone will say that this is wrong, but after all, these elements, except for <s> are not even invalid. In addition, HTML5 was designed with backward compatibility, the same applies to the new semantics of the old elements. Radically nothing has changed, and only the semantic pepper has been added.