HTML5 Theming with Drupal 7

Drupal 7 shipped its release on January 5, 2011. Drupal 7's code freeze was September 1, 2009. W3C didn't propose a stable HTML5 spec recommendation until October, 2014 and much of HTML5 was still up in the air as late as 2012. Needless to say, Drupal 7 didn't ship with HTML5 as the frontend spec. Drupal 7 released instead with an XHTML 1.0 transitional doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Fortunately, Drupal's adaptive nature as a platform means that HTML5 can be well-integrated in all key areas of the content management system.

Technically, all that needs to be done to change the doctype spec of your Drupal website is to declare it on your first line of HTML:

<!DOCTYPE html>

Integrating HTML5 in Drupal 7

So what's the trouble? That seems like a pretty simple line of HTML to change, doesn't it?

Well, the real problem is that this doctype declaration merely tells the browser what sort of HTML spec it should expect to need to interpret. Think of it like this:

You're about to speak to a stranger; think of when you're traveling. You don't know whether they speak your native language or not. What's the first thing you say to them? It's probably: "Do you speak English?" Perhaps they respond back that they do. Now, they've tuned their brain to be ready for you to say something in English.

What would happen if you then started asking where the nearest bathroom was but instead added some Spanish, "¿Where is the baño?"

This is how a doctype declaration works for HTML. The browser and the server are agreeing on what sort of language they're going to use with each other. This doesn't "translate" all the HTML that you're actually using though: you still need to update tags to meet their HTML5 specifications. If not, you might be throwing some Spanish into the middle of your HTML and hoping the browser will make a guess as to what you mean.

The good news is that most HTML tags won't need changing. The tags you use in old HTML/XHTML will still work, they'll just lack the additional features or context that HTML5 elements offer. (You're not using a <blink> tag right?)

Some HTML tags have been deprecated in HTML5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <isindex>
  • <noframes>
  • <s>
  • <strike>
  • <tt>
  • <u>

The new HTML5 elements I find myself using the most are actually semantic tags that further define classic div tags. A div is simply a block element which contains other elements (its opposite is the span which is an inline element container). Divs make up large quantities, if not most, of the tags used on any particular webpage. W3C wanted to offer further context through HTML5 to these div tags. Instead of just divs, we now have: nav, article, figure, aside, and section to work with. HTML5 Doctor offers an excellent flowchart to help visualize your decision as to which tag is most appropriate:

Which HTML5 Element to Use Instead of Divs

 

Of course, there's much more to the HTML5 spec than just these handful of new semantic tags. What's important to understand is that these new semantic tags are the basis of the HTML5 spec.

W3C defines the new semantic tag elements available within HTML5:

Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content
<bdi> Defines a part of text that might be formatted in a different direction from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

The new spec also defines form elements that give greater context to content within forms.

Tag Description
<datalist> Defines pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

As the web advances with more powerful browsers, rich graphics have become a core part of every web experience. HTML5 defines new graphic elements.

Tag Description
<canvas> Defines graphic drawing using JavaScript
<svg> Defines graphic drawing using SVG

Greater connection speeds have rolled out around the world since the last major HTML specification was created. Broadband is standard in much of the developed world with mobile devices having incredible connection speeds compared to the days of the 56k dial-up modem. We now have media as part of nearly every webpage: video, audio, and images. The new spec gives media a set of tags and attributes appropriate to them.

Tag Description
<audio> Defines sound or music content
<embed> Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content

 

What is Relevant in HTML5?

There's many other technologies that get conflated with HTML5 like CSS3, Websockets, or the Flash Killer: Canvas. CSS3 is a new specification for cascading style sheets, which does often go hand-in-hand with HTML5, but isn't actually under it. Websockets is an API that creates a bi-directional mode of communication over a single TCP connection (think of push/pull). As amazing as Canvas is, without a supporting JavaScript library, it's nothing more than another semantic tag further defining our old divs. If you'd like to check if a particular HTML5 tag or attribute is supported by a particular browser version, this tool will verify compatibility.

The primary way you'll upgrade your Drupal 7 website to HTML5 is actually through your theme. You won't need to rewrite everything if you can utilize an HTML5-based Drupal 7 theme. If you happened to use a base theme which has now migrated from XHTML to HTML5, the theme developer should provide an upgrade path. Themes generally override the core template files that Drupal provides. These template files contain the actual HTML which is output by the CMS. 

HTML5 JavaScript Compatibility Tools

Aside from adjusting tags to appropriately match the HTML5 spec, most HTML5 Drupal Themes will utilize JavaScript libraries to solve compatibility problems in older browsers that do not support the spec. The most important HTML5 JavaScript compatibility plugins are:

  • Modernizer - detects browser capability, provides capability indications within the DOM
  • HTML5 Shiv - provides support for HTML5 elements in older Internet Explorer browsers

Drupal Modules for HTML5 Support and Integration

There's several Drupal modules that focus on providing compatibility and integration with HTML5 elements within Drupal's existing systems.

  • Elements - provides support for advanced form elements which are the core of Drupal fields
  • Video - handles various video file trouble with HTML5 video elements; codecs, streaming, thumbnails
  • HTML5 Tools - connects the Elements (above) fields to Drupal systems and primary modules like Views

Drupal 7 Themes built on HTML5

The best HTML5-based Drupal 7 themes we've found through several project builds are:

  • Base or Starter Themes:
    • Omega - developer focused, JavaScript compatibility libraries, page layout system
    • Zen - hugely popular, tons of choice and control from the admin interface
    • Adaptive - point-and-click interface for controlling device size media queries
    • Fusion - integrates well with grid/layout systems
  • Functional Themes:
    • Corporate Clean - popular starter design for professional sites
    • Business - clean grid starting design for business sites

Curious about what we use on a majority of our projects? It's Omega, a lovely base theme targeted to dev/designers ready to code. Out of the box, Omega reminds me of the clean slate offered by the HTML5 Boilerplate framework (sidenote: there is a Drupal theme based on this HTML framework, but it gets little activity or support). There's very little markup to fight from the start, and Omega does a great job of stripping unnecessary classes and markup as much as is possible within Drupal. Omega uses a flexible layout system (sort of like a sub-subtheme), and a mobile first design system. We love Omega.

Does my Drupal Website Validate as HTML5?

W3C offers an excellent validation tool that's been updated as the HTML5 spec is updated. You'll always be validating against the latest agreed requirements as long as you're using the W3C HTML Validator. The validation tool will give you errors and warnings that pertain to particular tags, syntax, or attributes. The tool also offers suggestions and direction to solve the problem area. Once you're ready to begin testing, plugin your URL to the W3C HTML Validator and be sure the doctype is detected automatically as HTML5.

HTML5 and Drupal 8

Drupal 7 wasn't built from scratch to support HTML5. However, Drupal 8 will ship with integrated support for HTML5, and at the time of writing Drupal 8 is in beta. The future is looking bright for Drupal and HTML5.

Chris's picture