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
If you’ve built websites before you will probably recognise this:
My HTML Codes Logo
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?
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).
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
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.
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