If you’re not aware of it yet, HTML5 boilerplate is a fantastic starting point when creating a new site with its namesake markup language.
But where Boilerplate focuses on basic document setup, external files, scripts, and bug fixes, it strikes me that it doesn’t do much hand-holding when it comes to basic document semantic patterns. As I’ve been working more and more HTML5 into my projects, I’m noticing a common template emerging.
I’m sharing this as a minimum viable starting point since I’m still getting comfortable with the new semantics myself. Combined with Boilerplate, I’m feeling more and more confident that I’m beginning to use HTML5 properly. Don’t consider it canonical by any means, there’s likely a lot of room for improvement and it’s most certainly wrong in places. Comments / suggestions for improvement are more than welcome.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pageTitle</title> <link rel="stylesheet" href="default.css"> <script src="default.js"></script> </head> <body> <div id="accessibility"> <a href="#nav">Skip to Navigation</a> | <a href="#main-content">Skip to Content</a> </div> <header role="banner"> <div class="masthead"> <a href="#"> ....site title or logo, purposely not an h1.... </a> </div> <nav id="nav"> <ul> <li><a href="#"> ....main site nav list.... </a></li> </ul> </nav> <div id="secondary-nav"> <ul> <li><a href="#"> ....other non-primary navigation doesn't belong in a nav element.... </a></li> </ul> </div> </header> <section id="main-content" role="main"> <h1> ....page title here.... </h1> <article> <header> <h2>....article heading if needed....</h2> <h3>....article sub-heading if needed....</h3> </header> ....article content here.... </article> <article> ....use more article elements if appropriate; if not, I still use divs.... </article> </section> <aside id="sidebar"> ....site sidebar here.... </aside> <footer> .... footer content here .... </footer> </body> </html>
You’ll notice I’m a believer in reserving
h1 headings for the page title, and not the site / company name. I’m still not sure I get how to use the revised heading order so I’m sticking with old school
h6 for now.
Thanks to the pave the cowpaths philosophy that guided HTML5 development, it feels almost too easy. It’s not much more than a tweak to my previous XHTML template: change a few
ids to their corresponding elements here and there, replace various
asides where relevant, and add / remove extra attributes where necessary. Done.