The Difference the new Block Tags Make

HTML 5 introduces a number of new block level tags for dividing up your web pages into their component parts. These new tags are: article, aside, footer, header, nav, and section. These new tags do actually have a couple of ways in which they differ from using divs.

The first thing about these new tags is that that they provide standard names for the component parts of web pages. HTML 4 only provides the div tag to provide this functionality and requires that you add an id or class to each of the divs in order to be able to identify them. Of course the exact same end result would have been achieved in this respect if the appropriate id and class names had been given these special meanings instead and then no change to the actual list of valid tags would have been required in order to implement this functionality. As these entries are there more to allow bots and other automated processes to identify the component parts of the page, implementing this as ids and classes instead of as new tags would have allowed people to implement it immediately knowing that their page will work properly in all browsers without needing to take any action to get the browser to recognise any new tags.

This alternative implementation would have introduced header, footer, and article as ids with special meanings and aside, nav, and section as classes with special meanings.

The only other difference that introducing these new elements as tags instead of ids and classes makes is that every id in the web page is a potential spot that can be linked to within the web page. Making header, footer, and article tags instead of ids means that the code required to implement this functionality is longer using the new tags than it is if you use divs since with HTML 5 you end up with <article id="article"> in order to both wrap the article in the article tag and provide for linking directly to it. Had the id names had the special meanings applied instead of introducing new tags then the same meaning would have been produced using <div id="article"> which is eight characters shorter (given that there are an extra four characters in the closing tag as well).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow