Since I write and tweet about HTML5 Koolaid, it is only appropriate that my website also incorporates the new and improved semantic elements of HTML5. I also figured it would be the right time to upgrade to Drupal 6.

Here is how you can create a theme which uses some of the new elements of HTML5. This is not the only way to do it, but simply my attempt at creating one. Please comment if you know of better ways to do it.

Caveats

• The new elements of HTML5 will not render correctly in Firefox 2 and below (you can see how this website renders in Firefox 2 to see the true extent of devastation). Your best bet is to output a class to body element — use that to style the page — if Firefox 2 makes a request, using PHP Browser Detection (this script will cause crazy results on all browsers, if you enable caching).
• You need Remy Sharp’s HTML 5 enabling script so that IE can recognize new HTML5 elements and apply the CSS correctly.

Before you start creating a HTML5 Drupal theme, read this post on creating a blog with HTML 5 markup. That should give you all information you need on the markup. Then, start with an existing Drupal 6 theme that you want to convert to HTML5.

These are the template files I modifed:

• page.tpl.php - I divided the content into header, footer, section elements. I also used nav to be the container for the primary links

• node.tpl.php - Each node is an article. This is also where you can use the time element to mention the published date of a node:

  <time pubdate="pubdate" datetime ="<?php echo format_date($created,'custom', 'Y-m-d'); ?>">
      <?php echo format_date($created,'small') ?>
  </time> 
          

• search-result.tpl.php - I am not sure if this is correct, but I have marked up each search result as an article.
• search-results.tpl.php - If you need a sectioning element around the search results, this is where you should add it.
• comment.tpl.php - I used article to markup each comment. I also used time to render the publication date of a comment:

  <time pubdate="pubdate" datetime ="<?php 
   echo format_date($comment->timestamp, 'custom', 'Y-m-d\TH:i:s'); 
   $tzone = variable_get('date_default_timezone'); 
   printf('%s%02d:%02d', ($tzone < 0 ? '-' : '+'), abs($tzone / 3600), abs($tzone % 3600) / 60);
  ?>">
  <?php echo format_date($comment->timestamp, 'small')?>
  </time>

• comment-wrapper.tpl.php - In my theme, all comments are contained within a section which can be specified in this file.
• box.tpl.php - I used article as a container for the comment form. This template renders the container for that form.
• Own Module — I had to create a module to use article to wrap the Advanced Search Form. Here is the code I used in the module:

  //nimbupani is the name of the module       
  function nimbupani_form_alter(&$form, $form_state, $form_id) {   
    if($form_id == 'search_form') {
      $form['advanced']['#prefix']="<article>";
      $form['advanced']['#suffix']="</article>";      
    }  
  }
      

The api.drupal.org has a full list of all themable template files available to you in Drupal 6 if your theme requires more customization.

You can use validator.nu to test your pages. But be warned, the validator is known to lag behind the specification. So, you might get false negatives, if so, ignore them if you know you are confirming to the latest specification.

Further Work

This is just scratching the surface, you can also make all form elements to use HTML5 attributes, and also add ARIA landmarks. These are my focus areas for the next update to my theme.

Meanwhile, if there is any element that is incorrectly used on this site, or if you have any suggestions on how to make the site better, do comment!