HTML 5 New Tags
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.
- HTML5: <article></article>
- HTML4: <div class="article"></div>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <aside></aside>
- HTML4: <div class="aside"></div>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <audio src="xyz.ogg" autoplay controls></audio>
- HTML4: <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.
- HTML5: <canvas id="box" width="250" height="250"></canvas>
- HTML4 (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.
- HTML5: <command onclick=cut()" label="cut">
- HTML4: 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.
- HTML5: <datalist></datalist>
- HTML4: 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.
- HTML5: <details></details>
- HTML4: <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.
- HTML5: <embed data="flash.swf" width="300" height="200" type="application/x-shockwave-flash"></embed>
- HTML4: <object data="flash.swf" width="300" height="200" type="application/x-shockwave-flash"></object>
Adding 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.
- HTML5: <figure></figure>
- HTML4: <dl class="figure"></dl>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <header></header>
- HTML4: <div class="header"></div>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <hgroup></hgroup>
- HTML4: <div class="hgroup"></div>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <iframe src="xiframe.htm"></iframe>
- HTML4: <object type="text/html" data="xiframe.htm"></object>
Adding 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 just duplicate the functionality of the object tag.
- HTML5: <keygen>
- HTML4: no equivalent
This is brand new functionality being added to the browser.
- HTML5: <mark></mark>
- HTML4: <span class="mark"></span>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <menu></menu>
- HTML4: <ul class="menu"></ul>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <meter></meter>
- HTML4: no equivalent
This is a brand new element.
- HTML5: <nav></nav>
- HTML4 <ul class="nav"></ul>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <output></output>
- HTML4: <span class="output"></span>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <progress></progress>
- HTML4: no equivalent
This is a brand new element.
- HTML5: <section></section>
- HTML4: <div class="section"></div>
The only purpose this tag serves is to do away with the need to define a class.
- HTML5: <source>
- HTML4: <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.
- HTML5: <time></time>
- HTML4: <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 in JavaScript attached to the page. Whetyher this is a sufficient gain to make it worth adding a whole new tag is questionable.
- HTML5: <video src="xyz.ogv" type=video/ogg"></video>
- HTML4:<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.
As you can see, almost all of the proposed new tags in HTML 5 have equivalents in HTML 4 and little benefit is actually to be gained from adding most of them. Hopefully by the time the HTML 5 proposal becomes a recommendation all of the redundant tags will have been removed from this list leaving just those new tags that will actually serve a useful purpose.
Related Articles
- The Web Would Not Exist Without Standards
- XHTML Reference
- XHTML Reference
- Is My Web Page Fully Optimized?
- HTML 5 and CSS 3 For The Real World
