HTML5 Tutorials & More

HTML5 Semantic Layout Tags

One of the weaknesses of HTML4 was its inability to define the meaning of webpage content through tag structure. This is a major disadvantage when it comes to applications like search engines that need to parse content, as well as from the perspective of separating content and presentation.

The most commonly used tag for sectioning off content in HTML4, the div tag, says nothing about the actual meaning of the content in the context of the page. In HTML4, content would typically be given meaning primarily by custom classes assigned by the developer, the same classes used to style elements visually.

To help give developers more control over the structure of HTML documents, HTML5 introduces several new “semantic” tags that imply actual meaning for content within the entirety of the document.

The Section Tag

One of the most useful new tags in HTML5 is the section tag, which is used to divide up content within a document.

According to the HTML5 spec, “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

Although the div tag could once be used for much the same purpose, the section tag is different in that it implies a piece of content with its own thematic meaning. A section could be used for the equivalent of chapters in a book, or parts of a blog post.

It’s important to note that HTML5 in no way does away with or discourages use of the div tag where necessary. Rather in HTML5, sections should be applied to semantically different pieces of content. Divs should continued to be used for styling and other needed segmentation within a document. A section tag can almost be thought of as a “div tag with meaning.”

The Article Tag

Another new tag used to segment content, but which has a slightly different use, is the article tag. As suggested by its name, the article tag is best thought of as a being equivalent to a newspaper or magazine article, or a forum or blog post.

According to the HTML5 spec, “The article element represents a self-contained composition within a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

The difference between section and article might seem slightly confusing at first, since they both serve the purpose of segmenting off discrete, thematic pieces of content. And in some ways an article tag is simply a more specialized form of a section tag. The deciding factor in choosing to use an article tag is the independent nature of the content. If a piece of content can be plucked out of a site or document, and syndicated through an RSS feed or republished somehow, an article tag is the appropriate markup to use.

You could have an article tag within a section tag, or multiple sections within a single article. The only criteria is that the piece of content contained in the article tag is that part which is available for reuse or syndication.

The Aside Tag

Another element introduced in the HTML5 is the aside element. According to the HTML5 spec:

“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”

Typical uses for an aside element would be pullquotes or a sidebar area of content that is tangential to the main text. The aside tag should be nested within the segment of content that it is related to. That might mean inside a section or article tag.

The Header Tag

As you might have guessed, the header element simply represents a container for the heading of a section of content. As the spec says:

“The header element represents a group of introductory of navigational aids. A header element is intended to usually contain the section’s heading (an h1-h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.”

Although the first application that might come to mind for the header tag is the area at the top of a typical webpage with the logo, the HTML5 spec actually allows for pages to have multiple headers if necessary. Each section or article could have its own header element indicating the title of that segment of content.

The Footer Tag

According to the HTML5 spec, “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data and the like.”

The footer element, then, is the opposite of the header, serving as a container for footer information such as author, copyright and boilerplate info.

The Nav Tag

The nav element, as the name suggests, indicates a navigational section of a document. The HTML5 spec says: “The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.”

The nav element should only be used for major navigational sections within a document, and should not be used for every grouping of links.

Using Semantic Elements

The good news is that semantic elements can be safely used on your site today. The reason is that older browsers such as IE8 that don't recognize these elements will still be able to render the page, as long as you include a simple, extremely lightweight script such as Remy Sharp's "HTML5 Enabling Script" that writes the new elements into the DOM.

Although using semantic layout tags like section, nav and header requires a little more planning and thought, they provide a much more coherent structure for your HTML documents and will aid in SEO and syndication.