The Useful Parts of HTML 5

New Semantic Tags

HTML 5 introduces a number of new tags to use to semantically define the purpose of various sections of your web page. These are:

As far as the actual web page and the browser are concerned these tags are equivalent to specifying a div tag that has a class with a corresponding name. For those where it makes sense for there to be only one an id could be specified instead of a class. So if these had been added to HTML 5 as reserved class names then the same purpose would be achieved as far as the browser is concerned and if those where only one is allowed were implemented as reserved id names instead then it would be even more useful to the browser than is provided by the separate tag names (unless the standards also limit the use of those tags to one per page. In fact since the only use the browser needs to make of these identifiers is to apply the appropriate styles there would be no reason to even need to reserve class and id names as any names you choose would work for your site.

Where then is the benefit to adding these extra tags?

The answer is that browsers are not the only things to read web pages. Web bots (or spiders) also read web pages and use their content for a variety of purposes.

Perhaps the best known web bots are those used by search engines to find and add web pages to their index. Web pages contain a variety of things with the main content of the page only being a part of the page content. By wrapping that main content inside an article tag we identify that part of the page as being the part that is intended to be the reason for people visiting the page. Provided that the tag is used correctly it will make it easier for search engines to properly understand what the page is about.

Breaking the content up into sections each with its own heading makes it much clearer what heading belongs to what content - particularly where there are pieces of content that don't have headings. The hgroup tag also allows us to group headings so as to identify that a lower level heading is a part of the higher level heading that it follows rather than being the heading for the first subsection within that higher heading. This would allow the content headings to be extracted from the page and displayed in an appropriate hierarchical fashion that more clearly identifies the structure of the page than simply pulling out all the headings would.

In fact these tags open up all sorts of possibilities for browsers to provide extra options in the browser itself as to how you view a page. This is particularly useful with so many people now using mobile devices to access the web where the entire page cannot fit on their screen at once. Browsers on those devices could offer the heading summary as an overview of the page to help you to decide whether the page is likely to contain what you are looking for before you open the entire page.

The new nav tag could be particularly useful if browsers were to grab the content of that tag and add those links to a new menu option within the browser itself. That would make the navigation easily accessible even if the page has been scrolled so that the in page copy of the navigation no longer appears in the viewport. Future browsers might even drop the nav section from within the page itself so as to make the page smaller and easier to use on mobile devices and only offer it as a separate menu within the browser itself.

These new tags open up all sorts of possibilities for giving the person viewing the web page greater control over what they see. Browsers could introduce options to only display the nav and article sections of web pages or to drop any aside tags from the output allowing people to see the part of the page that is of interest without all the clutter of advertising, like buttons etc. In fact all of these suggested changes to web browser functionality could be easily added via a userscript without waiting for the browsers to build the options in. The only complication is that most web pages do not contain these tags and so such a userscript would only be able to discard sections of web pages that use these HTML 5 tags.

Just think about it, web pages that are considerate enough to identify which is the main content of the page and what is all the advertising and other parts that you don't really need in order to benefit from the page so that you can easily strip out all the unwanted part and just display the real page content. What a benefit to those viewing the page that would be.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow