The Major HTML5 Structure Tags

One of the defining elements of HTML5 was the further evolution and creation of tags/containers as information structuring elements. Although some form of these have been with us for years in one form or another, the growing need was pushed off into the generic DIVs with a class/id added to distinguish it. With HTML5 proper, however, several dedicated tags were created to help formalize and standardize this practice. The following is a brief introduction to the major ones.

<main> This is a document-specific element, meaning it should only be used once in any single page. The main area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. As such it should not be used as a descendant of other structural tags such <article>, <aside>, <footer>, <header>, or <nav> element, nor should it contain content that is repeated wholesale in multiple documents (navigation, copyright, logos, etc).

<header> This can be a tricky one, as the HTML5 header is often confused with the classic “masthead” header of a page in previous versions. Unlike the document-specific former, the HTML5 >header> can be used multiple times through a single document, wherever you need to add “a group of introductory or navigational aids” to a section of content. For example, every <section> could have its own <header>.

<section> The section tag’s function is to group thematically-related content. That sounds deceptively simple and it is, because it may requires the developer to digest (or have provided to them) an information architecture of the page’s content. Because of this, you will see a bit of subjectivity in <section>’s use. This is ok within reason.

<aside> The aside tag is used to contain and organize information that supports the main information of the page, but isn’t necessarily crucial to conveying that information. Pullquotes and sidebars are common implementations of the <aside> tag.

<nav> This one is actually pretty clear cut and well-adopted. The >nav> is used to group major navigational information, such as the site’s main navigation, supplemental footer navigation bar and so forth. You should draw the line at using it for any group of links, such as a related links section or further reading.

<footer> If applicable to the project, the <footer> should contain information about the content author, reference/bibliography, copyright/usage information, and so forth. Like the <header>, a <footer> could accompany each section in a document, but this is less common and you’ll probably only see one for the document/main as a whole.