HTML5 Tutorial: semantic refinements

Tags & Semantics

Various HTML4 functionalities have been improved in HTML5, some former presentation tags were given a new meaning, and some markup "misfits" were again welcomed in the transition to HTML5.

1. Semantic refinements of HTML4 elements

1.1 Nestable <em> phasis elements

The <em> element can be inserted to emphasize a word or phrase. In HTML 4, you also used the <strong> element to lay emphasis so there were two levels of emphasis. In HTML5 however the <strong> element has been redefined into the meaning of "important" rather than "strong emphasis". This seems semantic quibbling, but there can certainly be a difference between emphasizing and find something important. For example you can change the meaning of a sentence by emphasize a particular word, like in example below:

"I like this car"

has a different meaning than:

"I like this car""


You can add a new <em> element for laying even more emphasis. See the example below for an illustration of how <em> could be used:

Old HTML4 semantic markupNew in HTML5
<strong>...</strong> <em><em>...</em></em>
<em> ...<em> ...

When you convert all <strong> elements in this way, you will probably want to adjust your stylesheet. Here are some rules that you could use in your stylesheet:

em { font-style:italic }
em em { font-style: bold italic  }
em em em  { color:red }
em em em em { font-style:bold color:red }

1.2 The meaning of <strong>

This element has been redefined into the meaning of "important" rather than "strong emphasis". In the next sentence

"The bus will leave at 9:00 AM strict. We will not wait for latecomers!"

the word "strict" is important. If you don't know it, you might miss your bus

Like the <em> element <strong> element can also be be nested to provide an increasing degree of importance.

2. New semantic meaning of HTML4 elements.

A small number of presentation markup elements are redefined in meaning.

2.1 <small> for Disclaimers, Terms and Conditions and Copyright statements

The <small> element in HTML5 is now used to denote a set of semantic components that we might find on almost every web page, such as:

  • print rights;
  • disclaimers;
  • Terms and Conditions in a contract or add;
  • copyright statements.
  • the small print of a long end-user licence agreement or any other legal document
All such content is usually designed in the same manner with a smaller font size, but that's just the visual side. If this kind of texts is read (for example, in a TV commercial or browser or screen reader for the visually impaired), the voice is generally softer and monotonous.

2.2. <i>nstances of idioms and classifying terms

The previously presentation element <i> for cursive elements is redefined to give the following items a semantic value:

  • idiom;
  • terms from a taxonomy (such as for example names of animal species);
  • technical terms;
The essence of redefining <i> is the styling of a large set of disparate semantics in texts that were previously typically styled with <i> element. Is this redefinition of great importance now? It is up to the developers of web sites to give value to this element simply by using it. Otherwise it will eventually, likely be added to the list of 'flopped" HTML elements.

2.3 <b>old for intros, keywords, products, and other stylistic principles

The <b> element always meant: bold (bold in English), but no more!
Similar to the semantic transformation of the new <i> element, the new <b> element now has one of the following meanings:

  • keyword
  • name of a product
  • preliminary sentence or paragraph (intro)
  • text that for one reason or another must be given semantic meaning and should therefore be styled (this is also called "stylistic offset text" ).

By indicating that a portion of the text is stylistic offset, rather than simply being bold, browsers and other media carriers are told that they have to interpret it different than the normal surrounding text. It doesn't mean that it's important though. When a new <b> element is spoken by a screen reader, it uses a different voice to indicate that the text has a special significance.

In addition to the cases of keywords, product names and intros, typically styled with <b>, there are other instances where it makes sense to use the <b> element, for example when using different colors in text or titles, or when you want to float a section of the text, etc<b>

2.4 <br>eaking rules for addresses and poems

The <br> element was once intended as an no margins alternative to the <p> element, but in the course of time another use became in vogue, namely in addresses and poems where text that was placed on a following line got a different meaning. This convention has now been taken over by HTML5.

However, with the introduction of the so-called microformats, it appears that we no longer need the <br> tag to indicate separation between the different components of addresses. The format of an address in the past was commonly used as follows:

<div class="adress">
Ministry of Wizardry<br>
Potter Road 33<br>
ABCD 66 Azkaban-city (Hokus Pocus)<br>
Azkaban </div>

Using microformats, especially hCard and adr, we can format addresses as follows ::

<div class="vcard">
<div class="fn org">Ministry of Wizardry</div>
<div class="adr">
<div class="street-address">Potter Road 33</div>
<span class="locality">Azkaban-Stad</span>,
<span class="region">Hokus Pocus</span>
<span class="postal-code">ABCD 66</span>
<div class="country-name">Azkaban/div>

This not only indicates the separation of the address components, but also tells us that the address belongs to a particular organization.

2.5 <hr>Horizontal lines and changes of theme

The last presentation element that HTML5 has usurped for semantical reasons is the <hr> element. Originally an ordinary "horizontal rule" <hr> but over time more and more used as a visual separation between sections with different themes (as is done in books with a curl). The appearance of the line can be removed easily with CSS rules:

hr { border:0 }
or the appearance of the line can be adjusted:
hr {
background:url(../images/curl.jpg) no-repeat;}
It is purely intended to provide a graphic element to a theme change, so you can omit the alt text of the image.

3. HTML misfits welcomed again

Several elements and attribute in HTML4, or elements that were even never part of the W3C specification, are now recognized and built in in HTML5:

3.1 The <iframe> element

Omitted from the HTML 4.01 Strict DTD, and for a long time found unnecessary, the <iframe> element could be easily replaced by the element <object type="text/html">. But inserting an HTML document into another document appears to be valuable enough to maintain. HTML5 therefore recognizes the <frame> element, but without the presentation attributes such as frameborder, marginheight, marginwidth, which must be replaced by CSS properties. Instead a new presentation attribute was introduced: the seamless attribute. Using the seamless attribute you can remove the default presentation which browsers add to iframes (borders, scrollbars, spacing) so you can nest HTML in an frame in a way that it looks like the new HTML is part of the document. An example:

<frame src="added_content.html" seamless="seamless">
  Your browser does not support iframes, otherwise you would see added_content.html

Currently the <frame> element only supports textual fallback content for non-iframe supporting browsers . This is a shortcoming, at least you would like to place a link in the fallback content to the content of the frame:

<frame src="added_content.html" seamless="seamless">
<a href="added_content.html">Additional information</a>

However, this is not supported by HTML5. If you want to offer fallback content with markup then you have to use the <object> element.

In general, there is almost always a better way to insert HTML into your document than by use of iframes. Despite the upgraded status of the <frame> element in HTML, I recommend that, if possible, to avoid the <frame> element. Be alert of unexpected <frame>'s, not attached by yourself, which link to external document (with a src link to another site, for example src = "http://strange_page.cgi?etc) . This type of code can be applied by hackers for the purpose of installing malicious software on your computer. For this reason the <frame> element has recently been improved with sandboxing capabilities that may apply when you want to insert an external (and possibly untrustworthy) page through an <frame> . Nevertheless, this extension is still in its early stages, so it's better not to use it. However, it can not hurt to to keep an eye on this issue.

3.2 The <embed> element

For years browsers have supported the insertion of plug-ins, such as Flash and Quicktime, by the <embed> element and yet the element was not found in the W3C specifications - but as of now they do. HTML5 acknowledges the fact that <embed> element is already the facto supported by browsers and used by many, such as by interactive gamers, advertisers and video streaming. An example from the HTML5 specification:

<embed src="game.swf">
Needless to say, if you are a web designer who inserts plug-ins into Web pages, you can also now do this with the <embed> element and get a chance that you document passes the HTML5 validation.

3.3 The target attribute

In HTML4 the target attribute was rejected, assuming that the attribute only had some value left as presentation markup for framesets (which, in the mean time were also deprecated). However, HTML5 does recognize the <frame> element, so it is only logical to do the same with the target attribute, so that hyperlinks can modify the content of iframes. Moreover, it is a useful tool to open an external hyperlink to an external page in a new window, so that the visitor does not have to leave the site which is of course what you want.

<!-- the hyperlink "targets" an frame -->
<a target="t1"> 
<!-- the hyperlink "targets" a new window -->
<a href="http://external-page.html" target="_blank"> 

3.4 Lists: empty, numbered, and vice versa

The last maverick that is officially recognized by HTML5 has to do with lists. The specification forbade empty lists. Both the <ol> as the <ul> element should contain at least one mandatory element <li>. In today's Internet applications, it may be useful to make use of empty lists for later use, which can be, for example, filled with scripts. Empty lists are are therefore permitted by HTML5.


Also the following two attributes, the value and the start attribute, to produce aberrant numberings of lists were deprecated in HTML 4, but again included in HTML5.
Use the value attribute of a list item to indicate the number that deviates from the normal number sequence:

<li value="1">Francis</li>
<li value="2">Ron</li>
<li value="2">Michael</li>
<li value="4">Ursula</li>
value attribute in actie

Note that it is not really necessary to number the number 5 in the list list because numbers are automatically incremented after the last explicitly specified item value.

Use the start attribute for ordered lists that start at a specific number:

<ol start=”4”>
start attribute in actie

Finally, there is the new HTML5 reverse attribute that you can forget (at least for now), because it currently hasn't any browser support. If you want a descending numbering, you can use the so-called CSS3 counter, see the article Pseudo Content


Leave a comment