This article was written in 2009. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.


I switched to HTML 5. A nerd blog should have a nerdy doctype. There’s not much to say about it. I replaced the first div in the old HTML with a new element called header, I replaced the following divs which are direct children of the body with the new element section, I replaced the div that was a child of the section with the element article and replaced the last div of the page with the element nav. I could have chosen the element footer, but I think nav describes its purpose better. I don’t have an aside so I don’t need that element.

There are some very nice new attributes and attribute values I use on form elements that actually work in Opera. I used the required attibute, the type=”email” and the type=”url”. These form a efficient (but very ugly and unstyleable) client side form validation. Nice to have!

The best part of HTML 5 is that you will be able to remember every part of the HTML, even nerdy stuff like the doctype declaration. <!DOCTYPE html> is easy to remember. Just like <meta charset=”utf-8″>. So no more code searching and copypasting.

I left out the html, head and the body tags, browsers will put them where they are needed anyway, just like the tbody of a table.

You can’t use the W3C Validator for HTML like this, you’ll need the incredible

One thing to remember when starting to style your new HTML is to add display:block; to every new element like section. That’ll save you time. I’ll write about the CSS I wrote in a next post.


    • Marcel Korpel
    • #

    Hmm, as you’ll probably know, it doesn’t render very well in IE7 and 8. Shouldn’t you use HTML5 shiv for IE?

    • Vasilis
    • #

    I know. But I really don’t care about these browsers for this site since the only users who vitis this site with these browsers are webdevelopers who test this page (-: