I’m still amazed at how often we’re passing up the chance to use HTML5 tags in our documents. It’s hard to break old habits, I know, but it’s time to dump the mountains of DIV tags and get with some semantic markup. There are several awesome tags to start using in HTML5, but I wanted to hit six good ones to start people off.
Virtually every web page has it, why not set it aside in its own section? Site logo, navigation elements, even a search function can live up here.
This is insanely helpful when you’re looking at doing responsive design. Keep the Navigation section clearly (and uniquely) defined.
I consistently miss this one. I have a bad habit of wrapping the main content in a DIV and giving it an ID like “article” or “content.” Totally unnecessary now that we have the <article> element. Using <article> will allow your layout to know what’s the central part of the web page and, more importantly, let search engines know as well.
It never hurts to partition your content up into blocks. Again, this is a boon to responsive design. On a desktop, you can show all sections, but on mobile you can hide all but one, letting the user have a little more breathing room.
This is basically your sidebar on your web page. Where you can put navigation elements, advertisements, and other items not intended as the main course.
I have issues with pages that are missing this element. Infinite scrollers have buried this very useful section. People are accustomed to looking for it to find information about the publisher of the content. If you are a business, people fully expect to find a Contact Us down here. Don’t disappoint them.
Image courtesy of Jon Gosier @ Flickr