HTML5 Now! Drupal 7 theme Semantics, Templates, Techniques

Roll up your sleeves and get busy with practical steps for converting your theme into HTML5: the templates you need to change, the functions you can employ, the semantics to consider, and some gotchas.

Semantics

In xhtml, you have h1, h2, h3 etc. and you have divs, which are just generic things. Put a thing here, put a thing there. It's meaningless, semantically; and so we use IDs and classes, trying to make meaning out of the meaninglessness. But with HTML5, we can actually make meaning because we now have many new html elements with which to work: article, section, aside, nav, hgroup, header, footer, figure... Our things now have semantic meaning. Let's apply those to our page structure, our outline.

Templates

"You go into Drupal theming with the templates you have, not the templates you'd like to have." Or so says the themer in victim mind.

Let's find those templates and define some new ones to transform our output into semantically meaningful HTML5. And while we're at it, let's get rid of a few of them div things! We have the technology. We can rebuild it. We can make it better than it was ... better, sensible, meaningful....

Caveats

The theme layer merely scratches the surface of HTML5. No question, making Drupal into a fully compliant HTML5 CMS is a huge undertaking requiring thousands of hours of planning, discussing, architecting, coding, testing, patching.... Drupal 8 is going to be awesome! But there's a lot you can do for your Drupal 7 site today.