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.

HTML 5

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 validator.nu.

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.

Comments

    • 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 (-: