Using HTML5 and CSS3 to Build a Blog Design

1. I found a really good tutorial by Net Tuts on using HTML5 to build a CSS layout for a blog. It also uses some new CSS3 techniques. You can find it here:

2. This tutorial was written in 2009, so some of the HTML5 specs have changed since then.
  • The element header must not appear as a descendant of the footer element.
  • The section element should not be used to wrap articles just to demarcate content as described here

3. You can make this tutorial work in IE by adding this code to the head element.
<!–[if lte IE 9]>
<script src=””></script>


4. I recommend using DOCTYPE in capital letters and add a the meta tag for charset. So the first part of the code looks like this:

<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<title>Nettuts HTML5</title>
<link rel="stylesheet" href="nettuts.css" type="text/css" />
<!--[if lte IE 9]>
    <script src=""></script><![endif]-->

5. You may need to tell your browser to treat the new HTML5 semantic elements as a block to get them to work like your previous divs. Add this code to your CSS.

/* Tell the browser to render HTML 5 elements as block */
header, footer, section, aside, nav, article {
    display: block;

6. Validate your HTML5 code here:

and validate your CSS code here.
I chose the CSS 3 profile but it still says that many of the CSS3 styling eg. rounded corners is not valid.
I recently updated my CSE HTML Validator and it validated all of my CSS3 code. I recommend using CSE HTML Validator. It's an editor and a validator all in one.

7. You can download the final design with my modifications here. It's a zip file including the images.


More about HTML 5

Hi! nice post you got here! We also have a related article about HTML5 in our site. You may want to check it out, it might help. Visit Thanks! :)

thanks for the info

this was really helpful XD

Nice info and to the point

Nice info and to the point tutorial. anyway I found the url for final design is not active.


But where is download link?

I apologize for the broken link.

I apologize for the broken link. Here is the correct link to download my modifications to the HTML5 blog mentioned above.