*Converting Drupal 7 core site from XHTML to HTML 5

Even before HTML 5 was released in the fall of 2014, web developers have been actively using HTML5; especially for rolling out new websites. Web developers were encouraged to do so by W3C organization (with caution of course). Not only that, it was necessary for business! Various mobile devices already supported HTML5 and businesses want to reach their customers on these devices without further delay.

HTML 5 in Drupal 7

HTML 5

We can see that HTML 5 has been in active use for quite a while now but sites running on Drupal 7 core and other earlier releases are still using XHTML 1.0. Folks who are managing these Drupal 7 sites must be under tremendous pressure to reach clients on mobile devices and may be scrambling to convert their sites to HTML5. The good news is that, this process is not too difficult, especially for folks who are already familiar with Drupal theming concepts. With a few key adjustments, these Drupal 7 sites will function as a HTML5 site. The main adjustment will take place inside the site’s theme; within the theme’s html template file to be precise; html.tpl.php.

The first few lines of code inside Drupal 7’s core html template file will contain the DOCTYPE and <html> tag and it will look like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.0//EN”

“http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php print $language->language; ?>” version=”XHTML+RDFa 1.0″ dir=”<?php print $language->dir; ?>”<?php print $rdf_namespaces; ?>>

In order to start converting the site to HTML5, we will have to make sure the site uses HTML 5’s DOCTYPE declaration. To do this, edit the html.tpl.php and replace the DOCTYPE declaration like this:

<!DOCTYPE html>

Additionally, edit the <html> tag like this:

<!DOCTYPE html>

<html  lang=”<?php print $language->language; ?>”>

<head>

With these few lines of code adjustment, your site is now a HTML5 site! Yay!! Hmm… not so fast! To produce a proper and more complete HTML 5 site, other essential HTML5 tags should be added to the code, within the <body> tag. For example, the <header>, <footer>, <section>, <article> and other HTML5 tag should be configured into the site’s template where appropriate. These tags are not mandatory but they are considered essential for the semantic correctness of the site content. And of course, these tag adjustments will take some Drupal theming knowledge. Having said that, I want to add that browsers will process and present the site as HTML 5 site the moment the <html> tag is edited as shown above.

Leave a Reply