Semantics and Structure
The first version of this blog design, done in 2009, was really just a way for me to get familiar with CSS and jQuery (to make cars go up and down the side of the page). As time has gone on, I’ve become more and more interested in HTML 5 / CSS 3 and the huge usability benefits it has brought. Now that I’ve decided to rework the site to take advantage of HTML 5 / CSS 3, peeking at my page structure and stylesheets made me cringe. Organization was messy, not semantic at all and ridden with unused styles. It’s okay…I was younger then and in a period of experimentation.
A very important part of using the new features of HTML 5 is to have a well organized, semantically correct page. You see that menu on the left?…completely reorganized the structure, incorporating the <nav> tag, and then used media queries to change the styles.
You might be asking yourself if web semantics really matter. Well, they do…in my opinion. If you don’t think about the page structure and semantics, then you will end up like me, having to re-work your menu to take advantage of new features you hadn’t even considered back then. Think of it as maintainability and future planning. Once your page is structured semantically and in a meaningful way, you add more context to the content you’re serving (even if the majority of viewers are unaware). The more context you provide, the more possibilities are opened for your content to be used, even in ways you haven’t thought of yet.
HTML 5 has added over 30 tags to play with, which brings the total number to over 100. So go ahead and switch your blog posts to use the <article> tag or use the <address> tag for contact information.
Web Semantics and Structure Resources
- HTML 5 Doctor – View all the HTML 5 tags and get info on how use them.
- Smashing Magazine – HTML5 Semantics article
- Adobe – Understanding HTML5 Semantics article