Back to basics: how to code an HTML5 template

March 27, 2012

Markup is a beautiful thing, and it certainly has changed over the years. What was effectively HTML1, has certainly progressed to an amazing semantic markup language, to which we can largely thank the W3C. And, what do ya know, the next thing to thank them for has come about - HTML5. Unlike previous version of HTML, where the code was mostly a limited structure that was determined by how you made use of the class and ID elements, html5 really attempts to provide much more structure. All of the layout can be created with semantic tags and elements that determine how you should structure, and, arguably more important, that help you structure each page. This produces code that is much more clean and readable than in previous versions of HTML, and really is something quite amazing. The new tags really require that you think about how you are structuring your page, which let’s be honest - in the end that is a great thing for us web designers and developers alike. Before understanding the structure of HTML5, and how to create and code an example template to use for your projects you should be aware of how it came about. Be aware though that the current version of HTML5 has not reached a version that the W3C could call final as of yet, but their is quite a lot to learn about and start using in your code right now. Here is what the W3C has to say on this issue:

“Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing lists and take part in the discussions.”

But, don’t let that scare you. There are always people out there constantly making sure that it doesn’t get changed out from underneath of all of us. So you will certainly be aware if such a drastic change does indeed happen. Back on topic, one of the main questions people have about HTML5 is “<header>, <nav>, <footer>, these tags seem understandable enough but where in the world did the W3C come up with these?” Well, that question is easy enough to answer. It came from you! It actually came from all of us. In 2005 Google conducted a study of over 3 billion websites and found that the most common classes used in common markup were actually what you see there on that page. Footer, menu, title, small, text, content, header, and nav are all among the top of the popularity chart. And essentially that is how the W3C decided on what to use for the new semantic tags for HTML5. Now that we know about that, let’s dive right into what those tags are and the basic fundamental changes in HTML5.

The doctype

A doctype isn’t particularly an element of the HTML, but it is a deceleration, and one that has become more and more important as time goes on. Using one appropriately can help your browser understand what sort of HTML it is trying to parse so we always want to use the appropriate doctypes. In all honesty, at this current time, you can pretty much just use the HTML5 doctype for everything though - but let’s cover some past ones as well. Here is where we have come as far as simplicity:

HTML2:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">

HTML3:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">

HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

HTML5:

<!DOCTYPE html>

Pretty great right? You don’t need to keep a document for copying and pasting in some ridiculously long doctype, or even worse yet, try to remember the ridiculously long doctypes of versions past. For HTML5 you simply have to type <!DOCTYPE html>. Ah, what a relief.

Other simplifications in HTML5

Before leaving this section, let’s go through some of the other elements that have gotten simpler. The root element has been simplified, to which instead of having to write something like:

<html xmlns=”http://www.w3.org/1999/xhtml”
lang=”en”
xml:lang=”en”>

We can just write:

<html lang=”en”>

The things we need to copy and paste getting smaller and smaller by the minute. For instance, also, In the head element, our character encoding went from things like:

<meta http-equiv=”Content-Type” content=”text/html;>

to the newer version in HTML5:

<meta charset=”UTF-8”>

And lastly, our links have dropped their type attribute. So for instance, this:

<link rel=”stylesheet” href=”style.css” type=”text/css”>

Becomes this:

<link rel=”stylesheet” href=”style.css”>

So what's with these new tags?

The "section" tag

The section element is basically any generic section of an HTML document. Most typically though, it is a thematic grouping of content - which can have a heading but doesn't require one. A general rule of thumb for using the section heading is only use it if it would be explicitly referenced in the document’s outline. If, in the outline, there was a ‘section’ that you referenced or feel that all the content in one area is a ‘section’ of sorts - then do indeed include the section tag. If you want to use it mainly for styling purposes though, just don’t. Instead, use a <div> tag as you normally would.

The "nav" tag

The "nav" element represents any section of a page that links to other parts of that page or other pages within the sitemap. Anytime you think of navigation links, you should think "nav tag". The nav element is particularly intended for larger navigation blocks. Any large element that links to other sections of the site’s page or other pages of the site. Keep in mind though, a navigation section doesn’t have to be in the form of a list, albeit that is pretty standard. It can be in prose, paragraph tags, or pretty much anything - as long as it was originally suited to be in such tags in the first place.

The article tag

The article element represents a self-contained composition in a document, page, or any site. The really important thing to keep in mind with article tags is that it is, typically, independently distributable or reusable content is what is usually placed within the tags. It could be a forum post, a magazine or newspaper article, or a blog entry, even comments - as long as it is any independent item of content. Articles can hold "section"s inside them, "header"s inside them, even "hgroup"s inside them. But do keep in mind when and how you are using this element, as it isn’t quite as commonly used as a <div> tag. So in summation, it isn’t a one-in-all answer for everything, but it does indeed have a lot of uses. Let's hop into an example. For instance, let's say you have a blog post with some comments. You can do that like this in HTML5:

<article>
<header>
<h1>The Blog Entry Title</h1>
<p>12/25/2045</p>
</header>
<p>Blog entry</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: <span>Name of person</span></p>
<p>Time: 15 minutes ago</p>
</footer>
<p>Comment text here
/p>
</article>
<article>
<footer>
<p>Posted by: <span>Name of person</span></p>
<p>Time: 25 minutes ago</p>
</footer>
<p>Another comment here</p>
</article>
</section>
</article>

The "aside" tag

The aside element represents any section of a page that consists of content that is tangentially related to the content around the aside element. The most important thing to remember with this tag is that although it is content tangentially related to the content around the aside tag, it is typically information or content that is separated in characteristic. You will most often use it in sidebars, as most sidebars are perfect to be entirely wrapped in aside tags. Other uses can include pull quotes, bits of advertising, groups of nav links, or even addresses near the address of a location in question. To get into more detail though, it is for anytime you feel the need to quite literally take an aside and explain, reference, mention, state, or question something. You can even use an aside element for a larger section of a site, such as a side-bar for Twitter, or Facebook, or random links. You could have it be an aside, then use a header and nav section within it even to help understand what is going on there. You can use it in the footer section of blog posts to reference things about them, or pretty much anywhere it can be perfectly implemented.

The "hgroup" tag

The hgroup element represents the heading of a section. This element is best used to group a set of h1-h6 elements when the heading has multiple levels, or subheadings - such as exactly the article you are reading. This would be perfect for an hgroup. You can also use it for alternative titles, or tag-lines. The W3C reminds us:

"For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1–h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string.

Other uses, for instance, include areas of a blog where you are listing the header and subtitle for your blog post. You can also use it for book titles and descriptions, for listing doctors in your area and their areas of expertise, or even use it to help replicate the functionality of a table. Let’s take a look at such an example now. On a table we’d have:

<hgroup>
<h1>Doctor Name:</h1>
<h3>Randy McDocterson</h3>
<h2>Doctor Specialty</h2>
<h3>Slapping People</h3>
</hgroup>

So there you can clearly see, in the markup, that we have a doctor named Randy McDoctoerson who’s specialty is slapping people. Now, that is a little odd, but hey - it gets the point across.

The "header" tag

The header tag represents any group of introductory or navigational aids within a site, or sections of a site. So now that the formal definition has been stated, let's break it down a bit. We all know what a header is, but to be specific it includes various things on the top of most site. These header areas usually include branding sections, call to action items, and perhaps some navigation. Really it can be used any place that you used to write: <div id=”header”> you can now write <header>, and get the same semantic markup structure. It is important to note, that the W3C especially remarks that a header element should contain either a set of H1’s, a sections heading individually (h1-h6), or an hgroup element. Header elements can also be used to wrap a section’s table of contents, a search form, or any relevant logos - such as what we mentioned above. Keep in mind though that the header is not sectioning, as in it isn’t a replacement for an all-in-one div either. Rather, it is just a great semantic element to use for specific situations. To note: It can be used in any section's beginning area, as it doesn't have to be in the top or beginning of your HTML document. But, that is where it is most typically implemented.

The "footer" tag

The footer element represents a footer for its nearest nested parent section, and typically contains information about its parents section. The footer tag is very similar to the header tag, but for the opposite section of a page. Often times you will see a footer of a page that contains links again that were in the navigation, and perhaps a logo, or other such things - well all of these can now be housed in a <footer> tag. Though a footer is typically used at the end of a website, this tag can represent the end of any section of content (and it doesn’t even have to be at the end of said section to represent it). For instance let’s take a look at this example:

<body>
<footer><a href=”..”>Back to index...</a></footer>
<hgroup>
<h1>Lorem</h1>
<h2>Ipsum</h2>
</hgroup>
<p>Some text here.</p>
<footer><a href=”..”>Back to index...</a></footer>
</body>

The "address" tag

The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in.

<address>
 <a href="../People/Raggett/">Dave Raggett</a>,
 <a href="../People/Arnaud/">Arnaud Le Hors</a>,
 contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>

I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so:

<footer>
 <address>
 For more details, contact
 <a href="mailto:[email protected]">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today.

HTML5 Template

So now that we have learned about HTML5, let’s get into coding our own template. Let’s start with an average document.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
</head>
<body>
</body>
</html>

Now let’s add the stylesheet link, just for good practice, even though we may not use it.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Now I think it’d be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let’s do:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup></hgroup>
</header>
<section>
</section>
<footer>
<hgroup>
</hgroup>
<address></address>
</footer>
</body>
</html>

Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document - but now let’s add a navigation element as well.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<hgroup></hgroup>
<address></address>
</footer>
</body>
</html>

And there we go, we have added some navigation with a nice unordered list there in the header section. But, wait a minute. What if you have a nice big footer and want those same navigator elements in the footer as well. Well, let’s add it there also. Except, this time we aren’t going to use the <nav> tag and instead are going to use a div with the class “footer_navigation". And while we’re at it, let’s go ahead and fill out our footer section with some content.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div class="footer_navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</div>
<hgroup>
<h3>By Dain Miller</h3>
<h4>from Madison, WI</h4>
</hgroup>
<address>
<a href="mailto:[email protected]">Email Me</a>
</address>
</footer>
</body>
</html>

Now let’s add in some bits for IE, and other such technicalities.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div class="footer_navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</div>
<hgroup>
<h3>By Dain Miller</h3>
<h4>from Madison, WI</h4>
</hgroup>
<address>
<a href="mailto:[email protected]">Email Me</a>
</address>
</footer>
</body>
</html>

And there we have it: a basic but complete HTML5 template! What are your favorite new CSS3 techniques? Or little-used/little-known CSS techniques? Let us know in the comments!

Dain Miller

Dain Miller is a former Presidential Innovation Fellow at The White House, and mentor for developers at starthere.fm. He now works to lead engineering teams at a distributed media company. You can find him on Twitter @dainmiller or at his website