Relatively recently it was announced that Drupal is running on more than a million websites. The office where I work is quite fond of Drupal, though it has some problems and one of them is HTML validation. Drupal 7 is using XHTML+RDFa by default, though at this point lots of us prefer HTML5 and unfortunately changing this is not a straight forward task. Surprisingly even Drupal.org did not manage to fix all validation errors after switching to HTML5. So here’s a tutorial to fix this, based on W3C Validation for Drupal 7 HTML5 + RDFa with few improvements.
Fixing HTML5 markup for Drupal 7
First of all you have to make changes to html.tpl.php file, basically you should change only 3 lines (doctype, html, head):
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml“ xml:lang=”<?php print $language->language; ?>” lang=”<?php print $language->language; ?>” dir=”<?php print $language->dir; ?>” <?php print $rdfnamespaces; ?>>
<head>
….
</head>
In addition to this, you have to add a few functions to your _template.php file. The main purpose of the code below code is to convert the XHTML syntax (xmlns:name=”http://url”) into HTML5 (prefix=”name: url …”) syntax.
/**
- Implements hook_preprocess_html()
/
function themename_preprocess_html(&$vars) {
$prefixes = array();
$namespaces = explode(“\n”, trim($vars[‘rdf_namespaces’]));
foreach ($namespaces as $name) {
list($key,$url) = explode(‘=’, $name, 2);
list($xml,$space) = explode(‘:’,$key, 2);
$url = trim($url, ‘“‘);
if (!empty($space) && !empty($url)) {
$prefixes[] = $space . ‘: ‘ . $url;
}
}
$prefix = implode(“ “, $prefixes);
$vars[‘rdf_namespaces’] = ‘prefix=”‘ . $prefix . ‘“‘;
}
RDF Extensions module sometimes generates blank attributes which cause validation errors, the code below will fix this:/*
- Implements hook_preprocess_node()
/
function themename_preprocess_node(&$vars) {
foreach($vars[‘title_attributes_array’] as $key => $value) {
if(empty($value)) {
unset($vars[‘title_attributes_array’][$key]);
}
}
}
Another problem is with entities, Drupal sometimes generates duplicate “classes” and empty “typeof” attributes. The code below merges classes arrays into one, removes duplicate and empty attributes./*
- Implements hook_preprocess_entity()
*/
function themename_preprocess_entity(&$vars) {
if (!empty($vars[‘classes_array’]) && !empty($vars[‘attributes_array’][‘class’])) {
$vars[‘classes_array’] = array_merge($vars[‘classes_array’], $vars[‘attributes_array’][‘class’]);
unset($vars[‘attributes_array’][‘class’]);
}
foreach($vars[‘attributes_array’] as $key => $value) {
if(empty($value)) {
unset($vars[‘attributes_array’][$key]);
}
}
}
Check with W3 Validator and you should be all set.
Conclusions
You might run into other markup issues depending upon what other Drupal modules you are using. In most cases you can solve those issues via similar pre-processing tricks. Hopefully Drupal 8 will generate HTML5 markup out of the box with other great features.