Design, CG Graphics & Inspiration

HTML5: New Functions Of The Old Tags

It is well known that tags <b>, <i>, <s>, <small> are presentational, and consequently, in terms of a paradigm “structure, presentation, behavior” their use is not welcomed. Elements <strong>, <em>, <del> are seemed more usual. So it was during the long years of development practice. However a great deal changed in semantics of these elements with arrival of HTML5. Now we have 4 new tags with sense and our thoughts are in a muddle.

<b> VS <strong>

If before all textbooks on coding were bristling with such phrases as «use <strong> instead of <b>”, and it was half right, then today such habit can play a wicked semantic joke. And the business is that the authors of HTML5 suggest to use <b> for the selection of fragments of text on purpose to attract reader’s attention, without implying strengthening of meaningfulness of text or intonation. A specification makes examples of the use for marking of keywords in a document

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

and ledes (it is the first paragraph of the article in journalism)

<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>

In its turn <strong>, as well as before, means enhanceable meaningfulness of the content.

<i> VS <em>

From now on <i> contains the text knocked out from general surroundings, but not having the emotional colouring. To my mind, it is logically to use <i> where typographic tradition supposes italics (for example, words in foreign language, terms and other).

<i>Per aspera ad Astra</i> - in translation from Latin, saying means "Through hardships to the stars".

<em> means an emphatic stress, emotional accent on this fragment of text. It is a case, when in speech we distinguish words with our voice (by intonation, volume and other).

Execute <em>not</em>, pardon.

Read an agreement attentively!

“Small text fonts” (information which is a legal formality, as license of enterprise or legal address and other) we, as a rule, marked out with a class element, that set smaller font in visual Personal Agent. Now a new old semantic element appeared in our arsenal it is <small> tag.

Holywar about <s>

Previously <s> was nothing more than a strikeout text. Now <s> presents information which lost its actuality.

Also we have a <del> element, and the result of its treatment by default in visual Personal Agents is a strikeout text. It implies changes in a document, and on the face of it their function can show oneself identical. However here is a thin moment. We will consider the example of item’s page in an e-shop.

Two prices can be indicated on it, one of which is stroked out. We mark it out as <s> element. It means that the old price lost its actuality (it’s not important when it was, a fact is important). How to check, what is not <del>? <del> implies the changes brought in a document (the important thing is that a document was changed in some period of time). In our case, in a new document there is already irrelevant information.

New semantics and old doctype

If on some incomprehensible reasons you can’t substitute doctype with new one and formally make it up in HTML 4.01 – do not despair. Use old new elements with new sense and in course of time you will say yourself “thank you”. Maybe, someone will say that it’s wrong, but these elements, except <s> are not even valid. In addition, HTML5 was developed with a calculation on reverse compatibility, the same belongs to new semantics of old elements. Nothing changed radically, there was added a semantic peppercorn only.

You might also be interested in..

HTML5 Essentials Resources
How to Make Your Own Video Player On HTML5 Video
HTML5 Placeholder stylization with the help of CSS
15 Handy HTML5/CSS3 Frameworks For Web Developers
20 Free HTML5 Games
Meet The Future – HTML5 Demos
HTML5 video players
Content editable Feature in HTML5

  • Waldeh,
  • October 13, 2011
  • Web Design Company Mumbai

    Nice Share thanks for the information.

  • HTM

    funny i don’t now about , thanx

    • HTM


  • Nicktheandroid

    your article was hard to read, thanks, and no i’m not retarded.. The grammar and ways you put things together caused me to read it a couple times, and parts of it I still can’t figure out what you meant.

  • tamanna