5 Reasons to Use HTML5 Semantic Tags

Tuesday, January 4th, 2011

5 Reasons to Use HTML5 Semantic Tags

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.

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like