HTML5 Semantics In Practice

Following up on my last post, where I reviewed Jeremy Kieth’s book, HTML5 For Web Designers, I finally found some time to get my hands dirty with HTML5 semantics.

It’s a strange yet exciting exercise to move away from the coding conventions that I’ve used on a daily basis for the past six years (has it been that long already?) of my professional web design career.  I wouldn’t call it “re-learning” everything I knew before, but rather learning how to do what I do with a whole new and more efficient set of tools.

Kind of like when I started driving a hybrid car a few months back.  The rules of the road haven’t changed, but the equipment has a whole new feel, and it gets me there more efficiently.

If you check out the source code of this blog, you’ll notice I converted most of my div tags to new HTML5 elements such as header, footer, section, article, time, and nav.

Semantics and Style

One of the things I’ve always found interesting about front-end development is how every coder has their own personal style and approach.  It’s just like playing guitar.  There are 10 different ways to arrange your fingers to voice an A minor 7th chord.  There are 10 different ways to structure a website design.

Of course there are best practices, and perhaps a few hard “rules”.  The thing I found interesting on my first day trying my hand at the new HTML5 markup elements is how I’m interpreting the guidelines of the ever-evolving HTML5 specification and applying them to my design.

If I haven’t bored you enough with this tech talk yet, have a look at my markup and see how I chose to use HTML5 tags.  I’m sure there is room for improvement (there always is) and perhaps I misinterpreted how to use something.  To the coders in the room, let me know what you think.