HTML5: old tags for a new purpose

Everyone knows that tags , , , are the presentation, and consequently, based on the paradigm of "structure, performance, behavior" its use is discouraged. Where more conventional elements are represented , , . This has been the case 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 a mess in the head.

vs


If earlier all typesetting textbooks were full of phrases like “use instead ”, and this was half true, today such a habit can play an evil semantic joke. And the thing is that the authors of HTML5 suggest using it to highlight fragments 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 provides examples of the use of keywords and leads for marking up a document (the first paragraph of an article in journalism). In turn , as before, it means the increased importance of its content.

The frobonitor and barbinator components are fried.






Kittens 'adopted' by pet rabbit


Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.


Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.






vs


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

Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».

but means emphatic stress, emotional emphasis on this passage of the text. This is the case when in speech we highlight words with a voice (intonation, volume, etc.)

Казнить нельзя, помиловать.

Read the contract carefully!


“Text in small print” (information that is a legal formality, such as an enterprise license or legal address, etc.), we usually marked out with an element with a class that specified a smaller font in visual  user agents . Now in our arsenal a new old semantic element has appeared - .

Holivar o


It used to be nothing more than a strikethrough text. Now presents information that has lost its relevance. We also have an element , the processing result 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 product page in an online store. It may indicate two prices, one of which is crossed out. We mark it with an element  . This means that the old price has lost its relevance (it does not matter when it was, the fact itself is important). How to check what is not ? implies changes to the document

(The important thing is 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 impose  HTML 4.01 - do not despair. Use old new elements with a new meaning and over time you will say “thank you”. Perhaps someone will say that this is wrong, but these elements, in addition, are not even invalid. In addition, HTML5 was developed with the expectation of backward compatibility, the same applies to the new semantics of old elements. Nothing has changed radically, and only a semantic peppercorn has been added.

Also popular now: