HTML 5 Page Layout
Feeds
Saturday, 3rd July 2010
HTML 5 is now just around the corner. I have already tested HTML 5 on a myriad of browsers and with a tiny JavaScript and CSS fix, it works in every major player - so if you are a web developer you need to start thinking about your HTML in a subtly different way.
The big change is that in HTML 5, you can use specific and meaningful containers instead of generic and meaningless div-tags. So instead of having a div for your header, a div for your menu and a div for your content, you can use the header, nav and article tags to really describe your web page.
Below is a really simple example of an HTML 5 page with semantic tags that help to describe the page.
This example was last updated on 16/08/2011 with changes to the use of the section element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>An Example Of Semantic HTML 5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Steve Fenton's Fingers">
<meta name="language" content="en">
<meta name="keywords" content="HTML 5, Semantic, Tag, Use">
<meta name="description" content="An example of semantic HTML 5 tag usage">
<meta name="copyright" content="Steve Fenton 2010">
</head>
<body>
<div class="skips">
<a href="#navigation">Skip to Navigation</a> or <a href="#content">Skip to Content</a>
</div>
<header>
<h1>An Example Of Semantic HTML 5</h1>
</header>
<nav id="navigation">
<ul>
<li><a href="http://www.stevefenton.co.uk/Content/Home/">Home</a></li>
<li><a href="http://www.stevefenton.co.uk/Content/Blog/">My Blog</a></li>
<li><a href="http://www.stevefenton.co.uk/Content/Contact/">Contact me</a></li>
</ul>
</nav>
<section>
<header>
<h2>Articles</h2>
</header>
<article>
<header>
<h3>This is an article</h3>
</header>
<aside>
<p>If you have any comments on this article, please
<a href="http://www.stevefenton.co.uk/Content/Contact/">contact me</a>!</p>
</aside>
<p>In this example you'll notice that the page has a header and footer of its own, and that each
article (and there can be more than one article on a page) can also have its own header and
footer. Technically in HTML 5, each article header can contain a h1 tag, but for backwards
compatibility it is better to stick with a hierarchical nesting of these tags, which is why this
article has a h2 tag instead.</p>
<p>Each of the new HTML 5 elements in this example can be used just like the good old
(meaningless) div tag, except that they mean a lot more to the page. You can style them
exactly you did with div tags.</p>
<p>Here is a quick run down of the elements used on the page.</p>
<p>The header element is used as a contextual header. It applies to the "article" or web page
that it is contained within.</p>
<p>The footer element is also contextual and applies to the article or web page that is is
inside of. For a page it might contain copyright information and privacy policy links, for an
article it might contain related links or information about the author of the article.</p>
<p>The nav element contains the main page navigation links.</p>
<p>The article element contains a unique story or piece of content. The article should have
its own header and can also contain a footer.</p>
<p>The aside element can be used whenever you want to go off on a tangent or make a related
comment that isn't part of the main article.</p>
<footer>
<p>This article was written by Steve Fenton</p>
</footer>
</article>
<article>
<header>
<h3>This is another article</h3>
</header>
<aside>
<p>If you have any comments on this article, please
<a href="http://www.stevefenton.co.uk/Content/Contact/">contact me</a>!</p>
</aside>
<p>This is just an example of another article within the section.</p>
<footer>
<p>This article was written by Steve Fenton</p>
</footer>
</article>
</section>
<footer>
<p>© Copyright 2010 Steve Fenton</p>
</footer>
</body>
</html>