If you want to write semantic markup – and believe us, you do want to write semantic markup – then you need to structure HTML documents properly. The
body elements have been part of the HTML specification since the mid 1990s, and up until a few years ago they were the primary elements used to give structure to HTML documents. However, the situation has changed dramatically in the last few years as HTML5 has added a slew of new tags that can be used to add rich semantic meaning to the structure of an HTML document.
HTML Document Structure Before HTML5
If you’ve been using HTML for any time at all you know that every bit of HTML needs to be wrapped in
html tags. An opening
<html> tag should appear first and a closing
</html> tag should appear at the bottom of the document. Every other bit of HTML should appear between those two tags.
head element is the first element to appear after the opening
html tag. In the document
head we place things like the page
script tag, and we [
link] to external stylesheets and other resources.
On most webpages the
head element is a very busy place. For this reason, we’ve created a tutorial that explains the tags that typically appear in the
head element and what these tags are used for.
All of the content that is visible on a web page is nested between opening and closing
body tags. The body is the primary container of the content that makes up a web page.
Up until HTML5, that was pretty much it for basic HTML document structure. All of our code was dropped in between the
body tags and styled with CSS. However, now that HTML5 has broad support among modern browsers, it’s time to implement the new HTML5 tags that will give our HTML documents a much more meaningful structure.
New Semantic Tags Added by HTML5
In this brief tutorial we’ll touch on all of the new tags added as part of HTML5 to define the structure and content of a web page. The elements we’re going to cover in this guide include:
Using these elements isn’t as complicated as it might appear at first glance, and most are fairly self-explanatory. We’ll make a quick pass over each new element, and then draw up an HTML template you can use these new tags to add rich semantic meaning to your markup.
header element is used to contain the content that appears at the top of every page of your website: the logo, tagline, search prompt, and possibly a navigational menu. In most cases, the
header element is best positioned as a direct descendant of the
body element, but it’s also ok to place it inside the
main element if you prefer.
main element between
footer elements to contain the primary content of your web page. The
main element cannot be a descendant of an
nav element. Instead, it should be a direct descendant of the
body element. Think of it as the direct replacement for the
div id="main" you’ve used in the past to wrap up your entire page contents.
It’s also ok to use more than one
main element on a webpage. For example, if your blog homepage includes your five most recent posts, it would be appropriate to wrap each post in it’s own
main element – or you could wrap each in
Navigational menus are commonly placed at the top of a web page, in a sidebar, or in the page footer. Wherever you happen to place a navigational menu, wrap it in
nav tags. Note that you don’t need to use
nav tags for every link, just for blocks of links that provide either sitewide navigation or navigation for a specific part of a website.
If your website includes blog posts, articles, or any other content that could just as well appear on another website as syndicated content, wrap that content in an
article post. You can use an
article element just about anywhere other than nested within an
address element, but in most cases an
article element will be a direct descendant of a
main element or of a
section element that is a direct descendant of a
section element is used to identify content that is a major sub-section of a larger whole. For example, if you’ve posted a long-form ebook in HTML format, it would be reasonable to wrap each chapter in a
section element. Likewise, if you have a sidebar (semantically wrapped in
aside tags) that contains four sections – ads, a search prompt, related posts, and a newsletter signup form – it would be ok to wrap each of these four sections in
section tags since a written outline of the sidebar contents would include a line item for each of the four sections.
There is some confusion about when to use a
section and when to use a
div. Here’s a good rule of thumb to help you know when to use each:
- Use a
- Use a
sectionif you would list the content as an item when writing out an outline of the document.
If your website contains information that isn’t directly related to the main content of the page, it would be appropriate to wrap that information in
aside tags. For example, if you write a post that includes some technical terms, and you add definitions for those terms in a sidebar, it would make sense to wrap those definitions in
aside tags. It is also common for the entire sidebar of a blog-type website to be wrapped in
aside tags to make it clear that the sidebar is not part of the primary content of the page.
address element provides contact information for the nearest parent
body element that contains it. Use the
address element inside an
article to provide contact information for the article’s author. Use it outside of an
article in the
footer elements, or as a direct descendant of the
body element, to provide contact information for the website’s owner.
footer appears at the bottom of a section of a document. Typically, the
footer is a direct descendant of the
body element, but it can also be used within a
main element, a
section, or an
article. The most common use of the
footer element is to place it at the bottom of an HTML document to contain things like a copyright notice, links to related content,
address information about the owner of the website, and links to administrative things like privacy policies and website’s terms of service.
You may also use the
footer element within an
article to provide metadata about that particular article. For example, if
article tags have been used to wrap a forum post, it would be appropriate to wrap copyright information and the date and time the post was made in a
footer element and place it at the bottom of the
An HTML Document Template
The template below will show you how all of these elements are properly nested together. We invite you to copy it and use it as a boilerplate template for all of your HTML documents.