Key HTML5 Page Structure Elements - dummies

By David Karlins, Doug Sahlin

HTML5 provides a whole new way to structure page content. The impact of this aspect of HTML5 is less dramatic, at least on the user end. The biggest impact of new HTML5 page structuring tags is on designers. The following elements are the key HTML5 elements used to organize page content:

  • <header>: This element holds content at the top of a page. This content often includes a graphical or text page banner, perhaps a search box, sometimes content introducing the page, and often a navigation bar. The <header> element is not the same as a heading tag (h1, h2, and so on).

  • <nav>: This element holds navigation content, and can be (but does not have to be) embedded with other elements (like a header or footer).

  • <article>: This element defines a specific article within a page. And, within an article, <section> elements enclose subtopics within that particular article. Note: You never use a section element outside an article element.

    What constitutes an “article” or a “section” of an article? This is a judgment call for content creators. Newspaper, magazine, or blog articles are — rather obviously — articles. In a newspaper, magazine, or blog site, each article should be inside its own <article> element. And subheadings should demarcate sections in that article. In other text content, deciding what constitutes an article, or sections within an article, is an editorial call.

  • <aside>: This element describes sidebar content, usually within an article. Sidebar content is content associated with an article, or an article section, but which stands on its own. Traditionally, sidebars are run on the side of an article (usually on the right side) in online and print publications.

  • <footer>: This element holds typical footer content at the bottom of a page. That might include legal notices, and secondary navigation content (which should be organized into a nav element within the footer).

The page layout (with placeholder text and a bit of minimalist styling added) gives a sense of how HTML5 elements fit together on, and frame, a page.