Coding an HTML 5 page layout

By | March 16, 2011

Right let’s get down to business. We’ve been looking over the past few weeks at little snippets of code for HTML, HTML5, CSS and CSS3, javascript etc but now we’re going to be coding an HTML5 page in full to see how to lay the elements out. We’ll work down the page and explain as we go. The thing to think about first with HTML5 is that you need a good idea of what layout tags are available and what there uses are before you start coding so that you get all the content structured in the right way.

Inside my head…




  
  
  
  Coding an HTML 5 Layout

As I explained in my post HTML5 Doctype the new doctype has a much simplified html tag and the charset declaration. The reason for this is that HTML is not (and I repeat not) anything to do with xHTML (which would have frowned on this easy, lax syntax) and we could (but lets hope not) be on the way back to the bad old days where tags were not ended etc because HTML forgives all these mistakes (which is one of the reasons it took off in the first place because you could make a real dog’s arse of something and miraculously it would render in the browser). You could actually do the head of this document like this:


  
  
  
  Coding an HTML 5 Layout

but that is another can of worms that I don’t want to get into. You should follow the first example to do it correctly (I think?!). Confused? Good lets carry on. So what is the other code in our head? Well I’ve included Remy Sharps HTML5 Coding Shiv at the top of the page within an IE conditional statement so that it is only used for IE8 and below. This code creates any layout elements that older browsers may not support, for more on this read my Using HTML5 post. Although normally it is better to bring javascript files in to the page at the bottom this one has to be loaded before the page otherwise the elements that are on the page will be disregarded by the older browsers before it’s had chance to create them. Note also that the script and style tags do not have the type attribute as in the new spec the browser assumes that this is what these tags will be for.

Header Tag

If you’ve built websites before you will probably recognise this:


which is fine but the bods at the W3C thought that seeing as most of us use a header why not give it a tag of it’s own. In fact a lot of the HTML5 spec is to just give us the tags that we need for modern web design. In 2004 Ian Hickson (the editor of the HTML spec) mined 1 billion websites to see what were the most commonly used classes and more recently in 2009 Opera did a similar thing but included commonly used classes and ids and these results gave the W3C a good idea of how web designers are trying to structure their pages. So, with this information, how do we do it now?

My HTML Codes

I see the header tag like the header include in wordpress (sorry if you’ve never used it but if you’re serious about web design then you really should) it is global, which means it is on every page. So you include anything in here that is going on all the pages through out the site. That is why I have included the top navigation bar because this is global (in my pretend site).

Left Column


My left column consists of another nav tag wrapped inside an aside element. The aside element contains information that is related to but not directly connected to the rest of the content on the page. My left column navigation has links to the other pretend pages on my site. I have also put another H1 tag here because now with the new spec you can have multiple H1 tags that denote top level headings for that particular piece of content. I still haven’t heard a straight answer on how google is going to look upon the multiple use of H1 tags in a page because that could potentially dilute the SEO power of a page.

Main Content Area

Article 1 Header

Lorem ipsum....

Article 2 Header

Ut euismod .....

Article 3 Header

Praesent ut quam.....

First of all here I’ve used the section element to show that this is all one section of content for my page. I’ve also given the section an id so I can target it better in the css without affecting other section elements on the page. Inside the section I have three article tags that contain the content for three the post snippets that are on the page. As you can see here again each article has it’s own H1 tag.

The Bottom of the page

There has recently been a discussion on HTML5 Doctor about how to code “fat footers” in HTML5. I plumped for version E: and that is how I have coded it here.


 

Yes I know I’ve used a div and yes it’s not against the law you can use them. I used it here to easily divide the footer content from the rest of the page and also for the ease of targeting elements in the css. I believe that the top part of the fat footer is not really a footer at all but another element that is full of links to other parts of my site that related to the content on the page but not particularly on the same subject. That is why I have coded it as an aside with nav elements within it that contain a list of links. Then below that we have the actual footer which only contains the copyright declaration. And finally I have added a script tag thats brings in the jQuery library because most people use that nowadays.

In Conclusion

This is my interpretation of how to to go about coding an HTML5 page. I believe this is pretty close to how it should be done but I would love to hear anybody’s thoughts on what I have done here.
Demo of HTML 5 coding layout
Download the full Code here

2 thoughts on “Coding an HTML 5 page layout

  1. Kevin

    Great Page. I researched html 5 coding for about 5 hours to understand it. This is the best summary I’ve seen.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *