The header, section, footer, and nav tags, along with several others, serve purely semantic purposes. Traditionally, the div tag most often served to divide up the page into its constituent parts. Like the div tag, these content-describing tags should visually be blocks with no special styling by default. However, these new tags are helpful for several reasons.
1. Clearly defined regions for the developer
When editing an html document, particularly a complicated one with several nested layers, these tags make it much easier to tell at a glance where sections begin and (even more importantly) end. I’ve spent a lot of time counting “div” and “/div” tags to find the end of a particular set. Scanning for “header” is much faster.
2. Extra hooks for CSS without extra HTML
Setting the positioning properties for all sections or dictating the typical unordered list hierarchy of visibility for all navigation regions, without having to use classes, is quite handy.
3. Clearly defined regions for search engines
Search engines use different cues to determine different portions of the site. Search engines will most likely begin making heavier use of semantic tags as HTML5 becomes more common. Google’s Sitelinks feature allows users to select which area of your site they want to visit right from the search results page. If your navigation is inside a “nav” element, it makes it that much easier for Google to find it.
4. Assistive technology
Semantic tags have the potential to improve accessibility in screen readers and other assistive technology by breaking the page into important components. The HTML5 spec says, regarding the “nav” element, “User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.”
5. Script hooks
Similar to the CSS hooks, using semantic tags allows a script to use getElementsByTagName() to find all “aside” elements and hide them from view, for example. This also has implications for browser extensions and plugins, allowing scripts to quickly find information it deems important, as many RSS feed finding plugins do currently. For example, a browser may automatically place all the links inside navigation elements in a sidebar to allow users to navigate websites more easily.
