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:
http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-t...

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 http://html5doctor.com/the-section-element/

3. You can make this tutorial work in IE by adding this code to the head element.
<!–[if lte IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

See http://remysharp.com/2009/01/07/html5-enabling-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">

<head>
<meta charset="UTF-8">
<title>Nettuts HTML5</title>
<link rel="stylesheet" href="nettuts.css" type="text/css" />
<!--[if lte IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

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: http://validator.w3.org

and validate your CSS code here. http://jigsaw.w3.org/css-validator/
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. http://www.htmlvalidator.com/

7. You can download the final design with my modifications here. It's a zip file including the images.
http://www.seascapewebdesign.com/sites/files/html5-flower-blog.zip

Comments

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 www.ideyatech.com/2013/10/javascript-programming-with-html5-data-attribu... 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.

URL

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. http://www.seascapewebdesign.com/sites/files/html5-flower-blog.zip