Semantic Sections with HTML5
Along with HTML5’s flood of new tags has come a deluge of questions.
- What’s the difference between an
- Do I use an
- What’s wrong with the
In order to clear up some of this confusion I want to focus on a small subset of new HTML5 tags called “sectioning content”. These new tags include
<section>. These tags are used in HTML to create a new section of the page.
The document outline is the way that the browser thinks about your content. It reads in your HTML and creates an outline for itself to better understand what’s going on. When you create a new section using any of the new sectioning tags you are modifying the document outline. A
<div> will not modify modify the document outline but these tags will, so you use them wisely
Here what a blog’s document might look like (if it used some of these new tags):
1. Blog Posts (<body>) 1. Primary Navigation (<nav>) 2. Article #1 (<article>) 3. Article #2 (<article>) 4. Interesting Stuff (<aside>) 1. Blogroll (<article>) 2. Twitter Stream (<article>)
Realizing that a lot of websites are cobbled together with widgets from various places, the spec authors decided that it no longer made sense to require every heading on your page to be in numerical order. Instead the heading order is reset each time you create a section with one of these new tags, so you can happily re-use the trusty
<h1> tag without feeling any semantic guilt.
Here’s the basic structure of the blog referened above.
<body> <nav></nav> <h1>Blog Posts</h1> <article> <h1>Article #1</h1> </article> <article> <h1>Article #2</h1> </article> <aside> <h1>Interesting Stuff</h1> <article> <h1>Blogroll</h1> </article> <article> <h1>Twitter Stream</h1> </article> </aside> </body>
Note: When you create a new section you are strongly encouraged to use a heading to describe the section.
The New Tags
<section> is the most generic sectioning tag. It can be used to break an
<body> up into multiple parts. The spec suggests that you might use it to mark up a book with multiple chapters or each piece of content toggled by a tabbed navigation.
<article> is the bread and butter tag for self-contained content. Think sidebar widgets in addition to more obvious things like blog-posts. Other use cases for this include individual blog comments and basically any whole chunk of content that doesn’t depend on something else for it to make sense.
<aside> is usually used for sidebars and other content that is related, but not essential to the main purpose of the page or parent section. The spec mention using
<aside> for pull-quotes or background information within an
<article> as long as the
<article> will still be complete without it.
<nav> is where you want to put your pages primary navigation. Not every link needs to be wrapped in a
<nav>, but major navigation blocks should be put there.
These new HTML5 tags are used to create sections and sub-sections of pages. If you aren’t creating a new section or sub-section you can happily use a
<div> without any guilt.
Note: If you want to learn more about HTML5 sectioning read the WHATWG Spec.
Safari Books Online has the content you need
Check out these HTML5 books available from Safari Books Online:
|HTML5 Developer’s Cookbook provides all the expert advice and proven code you need to start building production-quality HTML5 applications right now.|
|HTML5 will transform web and mobile gaming. As new browsers rapidly adopt it, HTML5 will do everything “legacy” technologies such as Flash and Silverlight have done—and much more. In Learning HTML5 Game Programming: Build Online Games with Canvas, SVG, and WebGL”, pioneering developer James L. Williams gives you all the knowledge, code, and insights you’ll need to get started fast!|
|HTML5 is the most significant new advancement the web has seen in many years. HTML5 adds many new features including the video, audio, and canvas elements, as well as the integration of SVG. HTML5 Multimedia Development Cookbook is packed full of recipes that will help you harness HTML5’s next generation multimedia features. Whether you’re a seasoned pro or a total newbie, this book gives you the recipes that will serve as your practical guide to creating semantically rich websites and apps using HTML5. Get ready to perform a quantum leap harnessing HTML5 to create powerful, real world applications.|
About this author
|Jamund Ferguson is a UI Product Architect at oDesk where he helps other people find the joy of working from home. He’s a passionate advocate for mobile web and an enthusiastic node.js hacker. He works from his home outside of Salt Lake City where he lives with his wife and two kids. You can find him on Twitter at @xjamundx.|