HTML5 doesn’t change how you build web pages very much, but it can be helpful to go through the design of a well-written HTML5 document so that you can understand how to build an HTML5 page and why you need various elements and features.
This article will walk you through an HTML5 document and explain all the new and different features.
Starting at the Top
The first thing that distinguishes an HTML5 from an HTML 4.01 page is the
DOCTYPE. This is the first line in the document:
It’s very important that the first element inside your
HEAD element is the
META charset. This helps keep your page more secure.
TITLE element is the same as HTML 4.01. Describe the name and purpose of the page here. Remember that the
TITLE is used by search engines in the results and by web browsers in the bookmarks, so it should be well written.
<title>Sample HTML5 Document</title>
LINK element to one external style sheet right after the
TITLE element helps your pages load more quickly. And then you can list any other
META tags you want to include. The only one that is really important is the
META description tag. This is used by search engines to describe the page. But you can also include
META keywords if you like.
<link rel=stylesheet href=styles.css>
<meta name=description value="And this describes the page">
<meta name=keywords value="keywords, go, here">
The last thing in your
HEAD element should be any scripts you might need to load, like jQuery and the HTML5Shiv to help IE 8 and lower view your HTML5 pages as well as they can.
<!--[if lt IE 9]>
Start Building Your Document
Typically, the first part of your page is a header section for the entire page. In it you might find a logo, page title, tag line and possibly main navigation. You can use the
HEADER element to define the header section.
<img src="logo.png" alt="My Company">
This example page places the page title and sub-title into an
HGROUP so that they are seen as one heading by any outlining functions, and they do not create separate implied sections.
There is also navigation indicated by the
The Meat of Your Document
I like to think of the
ARTICLE element as the meat of your page, but it really is any content on the page that might be syndicated. It is unlikely that you wouldn't use the
ARTICLE element on a page, as most pages you want your readers to find something of value in it, and this example page is no exception.
<h1>Main Page Contents</h1>
<p>... Main contents go here
If your article contains a table, image, or pull-quote that you want to include with the article but it doesn't have to be in a specific place in the article, then you can put these elements in a
<img src=image.png alt="An image that can remain out of the flow">
<p>This is a figure for the article
Any section of your page can have a
HEADER or a
FOOTER. This article doesn’t have a
HEADER, but it does have a
Include details about the article contents in the footer like by-line, date written, or related articles. You can also put these in an
ASIDE element if it seems more ancillary to the article contents.
Nearly every web page has information that lies outside the main point of the page. This content can be stored in an
ASIDE element. Because this
ASIDE is outside the
ARTICLE, this tells the browser that the contents are tangentially related to the site as a whole rather than the specific article.
Remember that every section must have a headline. I have written them in this document as all
H1 elements, but this can be difficult for screen readers to interpret. So you might want to build them in a hierarchy (
H3, etc.) as you did in HTML 4.01 documents.
<h1>Site Ancillary Information</h1>
This sidebar has three separate elements inside it. These elements aren't semantically an article, aside, or navigation, so I used the most generic of the sectioning elements,
The Bottom of the Page
The last thing you will probably see on an HTML5 document is the
FOOTER. This contains information that is normally found in the footer of most web pages like supplemental navigation, copyright information, and contact links.
<h1>Page Footer</h1> <p>Copyright ©2011 Jennifer Kyrnin
This footer contains extra navigation which I surrounded with the
NAV element. You don’t need to surround every aspect of navigation with the
NAV element, just the navigation areas that are the most important.
And an HTML5 document ends like any other HTML document, with the closing
You can see the complete HTML document here.
What About How the Page Looks?
One thing you’ll notice if you build this page exactly as I’ve written it is that it’s very plain looking. The sectioning elements do not add any extra styles to the page, you need to decide how your page is going to look using style sheets.