c


HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most
HTML 4 pages include a variety of common structures, such as headers, footers and columns and today,
it is fairly common to mark them up using div elements, giving each a descriptive id or class.

HTML5
î

î 

î 
î 

î 
î 
î




î

î 
î

î
î

 

î

 
î


There are lots of new tags that have been added to HTML 5 that are not in HTML 4. Since
HTML 4 works quite well the main question about all these new tags is "why are they all being
added"? From what I can see most of the new tags serve no useful purpose as there are simple
ways of specifying exactly the same thing in HTML 4 only in a slightly different way.

So what we are looking at here is specifically how to achieve the same result in HTML 4 as you
will get if the proposed HTML 5 tag is adopted into the final standard. We'll work out which
ones will actually provide additional useful functionality that is not currently available in HTML
4.

Note that this is not a consideration of the new attributes added to some tags or of those tags and
attributes removed from HTML 5, this is specifically looking at the new tags.

! c
 <article></article>
! c
 <div class="article"></div>

The only purpose this tag serves is to do away with the need to define a class.

! c
 <aside></aside>
! c
 <div class="aside"></div>

The only purpose this tag serves is to do away with the need to define a class.

! c
 <audio src="xyz.ogg" autoplay controls></audio>

! c
 <object type="application/ogg" data="xyz.ogg"><param name="src"
value="xyz.ogg"></object>
This new tag just duplicates some of the functionality of the existing object tag. While the code
required in HTML 4 to attach audio so that it will work in IE6 as well as more modern browsers
is more complicated than that shown, IE6 doesn't support the HTML 5 version either and so the
new tag is mainly saving on complexity that is going to disappear with IE6 anyway.

! c
 <canvas id="box" width="250" height="250"></canvas>

! c
 (closest equivalent): <object data="inc/hdr.svg" type="image/svg+xml"
width="250" height="250"></object>

This tag does provide some brand new functionality into the web page in that there are also new
JavaScript commands to interact directly with this tag.

! c
 <command onclick=cut()" label="cut">

! c
 none

Best practice is to move the JavaScript to a separate file and reference it unobtrusively so you
would never need this HTML5 element. If such a tag had existed in HTML 3.2 it should have
been deprecated in HTML 4 and certainly has no place in HTML 5.

! c
 <datalist></datalist>
! c
 see combobox.

This new element adds the missing combobox element to forms so that you don't have to use
JavaScript to create it. Possibly the most useful of the new tags that have been added.

! c
 <details></details>
! c
 <dl class="details" style="display:hidden"></dl>

This tag adds the ability to toggle the visibility of sections of the web page without the need for
CSS and JavaScript.

! c
 <embed data="flash.swf" width="300" height="200" type="application/x-

shockwave-flash"></embed>
! c
 <object data="flash.swf" width="300" height="200" type="application/x-
shockwave-flash"></object>
odding the proprietary embed tag into the standards when the standard object tag already serves
the same purpose is completely pointless. The only advantage that the embed tag currently has is
in simplifying the code needed to support IE6. By the time that the embed tag becomes part of
the standard IE6 will be long gone and the embed tag will basically just duplicate the
functionality of the object tag.

! c
 <figure></figure>
! c
 <dl class="figure"></dl>

The only purpose this tag serves is to do away with the need to define a class.

! c
 <header></header>
! c
 <div class="header"></div>

The only purpose this tag serves is to do away with the need to define a class.

! c
 <hgroup></hgroup>
! c
 <div class="hgroup"></div>

The only purpose this tag serves is to do away with the need to define a class.

! c
 <iframe src="xiframe.htm"></iframe>

! c
 <object type="text/html" data="xiframe.htm"></object>

odding the deprecated iframe tag back into the standards when the standard object tag already
serves the same purpose is completely pointless. The only advantage that the iframe tag currently
has is in simplifying the code needed to support IE6. By the time that the iframe tag becomes
part of the standard IE6 will be long gone and the iframe tag will basically justduplicate the
functionality of the object tag.

! c
 <keygen>
! c
 no equivalent

This is brand new functionality being added to the browser.

 ! c
 <mark></mark>
! c
 <span class="mark"></span>

The only purpose this tag serves is to do away with the need to define a class.

! c
 <menu></menu>
! c
 <ul class="menu"></ul>

The only purpose this tag serves is to do away with the need to define a class.

! c
 <meter></meter>
! c
 no equivalent

This is a brand new element.

! c
 <nav></nav>
! c
 <ul class="nav"></ul>

The only purpose this tag serves is to do away with the need to define a class.

! c
 <output></output>
! c
 <span class="output"></span>

The only purpose this tag serves is to do away with the need to define a class.

! c
 <progress></progress>
! c
 no equivalent

This is a brand new element.

! c
 <section></section>
! c
 <div class="section"></div>

The only purpose this tag serves is to do away with the need to define a class.
 ! c
 <source>
! c
 <param>

The source element serves the same purpose inside audio and video elements as param does
inside object elements. Since audio and video elements are just named objects these elements are
equivalent.

! c
 <time></time>
! c
 <span class="time"></span>

This new element does serve to make the time available in a standard format within an attribute
of the tag and so may simplify time related processing inJavaScript attached to the page.
Whetyher this is a sufficient gain to make it worth adding a whole new tag is questionable.

! c
 <video src="xyz.ogv" type=video/ogg"></video>

! c
<object type="video/ogg" data="xyz.ogv"><param name="src"
value="xyz.ogv"></object>

This new tag just duplicates some of the functionality of the existing object tag. While the code
required in HTML 4 to attach video so that it will work in IE6 as well as more modern browsers
is more complicated than that shown, IE6 doesn't support the HTML 5 version either and so the
new tag is mainly saving on complexity that is going to disappear with IE6 anyway.