Building HTML5 the Smart Way
Have you used HTML5 in your latest website? Or are you too intimidated to even try? HTML5 has not changed on how you build web pages much, but it can be helpful to go through the nitty-gritty 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.
Here we will walk you through an HTML5 document and explain 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:
<!doctype html>
But after that it is the same as HTML 4, you put an HTML element and then a HEAD element.building html5
<html>
<head>
It’s very important that the first element inside your HEAD element is the META charset. This helps keep your page more secure.
<meta charset=utf-8>
The 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>
Putting a 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.
<script src=”http://code.jquery.com/jquery.min.js”></script>
<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>
Start Building Your Document
The BODY element is where you start using all the new HTML5 sectioning elements. This divides your page up into sections that can be outlined and viewed semantically.
<body>
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.
<header>
<img src=”logo.png” alt=”My Logo”>
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.
<hgroup>
<h1>Page Title</h1>
<h2>Page Sub-Title</h2>
</hgroup>
There is also navigation indicated by the NAV element.
<nav>
<h1>Main Navigation</h1>
<ul>
<li><a>Link</a>
<li><a>Link</a>
</ul>
</nav>
</header>
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.
<article>
<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 figure.
<figure>
<img src=image.png alt=”An image that can remain out of the flow”>
<figcaption>
<p>This is a figure for the article
</figcaption>
</figure>
Any section of your page can have a HEADER or a FOOTER. This article doesn’t have a HEADER, but it does have a FOOTER.
<footer>
<p>Footer text</p>
</footer>
</article>
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.
Extra Information
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.
<aside>
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 (H1 then H2, then H3, etc.) as you did in HTML 4.01 documents.
<h1>Site Auxiliary 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, SECTION.
<section>
<h1>Blogroll</h1>
<p>…
</section>
<section>
<h1>Twitter Feed</h1>
<p>…
</section>
<section>
<h1>Advertisements</h1>
<p>…
</section>
</aside>
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.
<footer>
<h1>Page Footer</h1> <p>Copyright ©2013 Jane Doe
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.
<nav>
<h1>Footer Navigation</h1>
<ul>
<li><a>Link</a>
<li><a>Link</a>
</ul>
</nav>
</footer>
And finally, an HTML5 document ends like any other HTML document, with the closing BODY and HTML tags.
</body>
</html>
Very useful article to share knowledge on HTML5.