Bootstrap Theming - How to create and use an HTML5 DTD in Drupal 7
In this article, I'm going to show you how to create and use an HTML5 DTD (Doctype Declaration) with the Bootstrap theme in Drupal 7.
Replacing the default doctype declaration
Because XHTML + RDFa is the default doctype declaration used by Drupal 7 and given that HTML5 does not work properly with RDFa 1.0, using an HTML5 DTD is a three-step process:
In order to use HTML5 along with RDFa: use a valid doctype declaration for HTML5; use RDFa 1.1; and get rid of RDFa namespaces (RDFa 1.1 doesn't rely on XML-specific namespace mechanism any longer).
1. Disable the RDF module that comes with Drupal 7 by default. In order to do so, go to admin / modules and then uncheck the checkbox for this module. Do not forget to save the configuration.
2. Create the new HTML5 DTD by using the template_preprocess_html() function in the template.php file.This function is responsible for preprocessing variables for the html.tpl.php file.
When a piece of code passes data to the theme() function for a particular theme hook, you can alter that data by using preprocess functions.
Since you will define the preprocess function for the html theme hook in the template.php file of your default theme, the preprocess function looks like this:
function [theme]_preprocess_[theme hook name](&$variables) {
}
Replace [theme] with the name of your default theme and [theme hook name] with html.
3. Copy the html.tpl.php file from sites / all / themes / bootstrap / theme / system into the templates folder of your default theme and replace the following piece of code:
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces;?>> <head profile="<?php print $grddl_profile; ?>">
with this one:
?><?php print $doctype; ?> <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"> <head>
Now save all your changes and clear all caches. If everything is OK, this is how the new doctype and html tags look:
