Prior to HTML 5, there was no real markup to help explain the intent behind your HTML code. The goal of HTML 5 was to offer a more readable way of writing your code, so that any author that comes after you can have an easier time going through what you’ve created.
So what are semantics? Semantics is a process of providing meaning through a language. In the web, this means providing syntax that illustrates the meaning behind the content it wraps.
Previously, we’d use div’s for everything. It is now strongly suggested that you use div’s as a last resort. Always try and use more semantic tags where appropriate.
Sectioning Elements
As defined in the HTML 5 specification, Sectioning content defines the scope of headings and footers. The following tags are used to define sections within your document.
- article
- main
- aside
- nav
- section
- header
- footer
Each element has a different meaning though as to what kind of data is expected.
Article Element
The article element, you can think of as a self-contained element. Meaning that if you were to remove the element with its containing content, that the rest of the document would still work just fine. Examples of this could be a blog post, a product on a category page, or really any other stand alone item of content.
You can also nest article elements within other article elements. When nesting article elements, the inner article elements would be considered elements related to the parent article element. For instance, comments on a blog post.
Main Element
When you have a known area of content that is considered the primary content of the page, you should mark it up with the main element instead of article. You can still use article as well, but it would be considered redundant.
Aside Element
The aside element should be used to surround a section of the document that contains information that is related to the sibling content, but not directly about it. For instance, you may see sidebars as a common use case where the side bar contains related links regarding the primary information on the page.
Another common use case for the aside tag would be with advertisements. For instance in the case that you have some ad space on your page that may is related to the information you have posted, but you want it to be kept separate from the main content.
Nav Element
The nav link should be used to surround a section of a page that contains links to other pages or areas of the same page. For instance, your top navigation for your website.
One thing to note though is that the nav element should not go around all groupings of links on your pages. Instead you should only use the nav tag to surround major navigational blocks. Also, let’s assume you have your categories within your primary navigation of the website. If you also have those same categories in your footer, then there is no need to wrap them in the nav element.
Section Element
The section element is one that is commonly confused with article. The section element should only be used to represent a generic section of a page. Think of it this way, if there is content on your page that should be syndicated then use article, if not you can use section. For instance, you may want split up your homepage into sections, since each section of a homepage is typically generic.
Header Element
The header element is used for grouping the following information:
- Branding Information
- Heading Information
- Navigational Aids
Not only can this tag be used for the header of your website, but it is also used to mark the introductory areas of each of your sections.
For instance, let’s assume we have a category page with products on it. On our category page we have our category name, category short description, and maybe some related category links. You could essentially group this section with our header, as it’s the start of our category page.
Header tags can be used within sectioning elements or sectioning root elements.
Footer Element
You can have multiple footer elements, as you can with header elements. The footer element represents the footer for its nearest ancestor. It normally contains information like:
- Author Information
- Copyright Information
- Related Links
Sectioning Roots
Sectioning roots are used to group sets of information that are not needed within the document outlines of it’s ancestors. In fact, any markup placed within a sectioning root element is completely ignored by it’s parent document structure.
Below are the tags considered as sectioning root elements.
- blockquote
- body
- fieldset
- figure
- td
Testing Your Structure
A nice browser tool that you can use in either Firefox or Chrome is HeadingsMap. This extension allows you to see your current document outline in both the latest HTML 5 overview, as well as the previous HTML 4 outline structures.
Features Include:
- Shows structure of the current document’s headers.
- Displays the outline of each of the headers.
- Alert’s you if there is a section without a header.