Beginner and Intermediate Guide to HTML5 / CSS3 in Drupal

html structure

This is our live blog of the session “Beginner & Intermediate Guide to HTML5 / CSS3 in Drupal” by Kendall Totten from It was given at Drupal on the Bayou in New Orleans this week.

Kendall introduced HTML5 and CSS3 and explained how they are related to Drupal. She gave examples of Drupal modules and themes that already allow us to use HTML5 and CSS3 in Drupal.


Upgrading to HTML5 is as simple as:

  1. Changing your doctype to:<!DOCTYPE HTML>
  2. Reset your CSS stylesheet:

A key idea of HTML5 is that we’ll move away from meaningless <div> tags to more specific tags such as <header> and <footer>. The posh word for this is semantic.

This isn’t just better for people reading our code. It’s also better for machines like search engines and mobile devices who read our code.

Practical Content Examples

<h1>This is my header</h1>
<p>By Richard Clark</p>
<p>Main text of my article</p>
html structure

We can also have <section> tags which are usefully labelled:

<h1>This is my header</h1>
<p>By Richard Clark</p>
<section id="what-are-outline">
<h2>What are document outlines?</h2>
<p>Main text/p>
<section id="outlines-in-html5">
<h2>Outlines in HTML5</h2>
<p>Main text</p>

A Practical Image Example

We can also display images with more useful information:

<img src="yay.jpg">
<fig caption>


<div itemscope itemtype="">

There is a Microdata module being developed for Drupal:


Microformats are very similar to Microdata but they drill down to specific sections on the page. For example:

<span class="street-address">265 Main Street</span>
<span class="locality">Drupaltown</span>
<span class="region">Drupal Province</span>

Drupal Themes with HTML5

  • Omega
  • Adaptive Theme
  • Genesis
  • HTML5 Base
  • Boron
  • Zentropy
  • Plink

Kendall’s favorite is Delta module. Here’s comparison from

html5 Drupa themes

HTML5 Modules

22 are already available for Drupal 7. These include:

  • Video: upload and play in any format.
  • HTML5 Tools: support for several HTML plugins plus support for Views.
  • Aloha Editor: Provides an HTML5-friendly WYSIWYG Editor.

SVG (Scalable Vector Graphics)

New graphics file format and language, based on XML. Worth checking out Abode Illustrator allow export to SVG.

Dealing With Internet Explorer

PIE (Progressive Internet Explorer) makes Internet Explorer 6 to 9 recognize a lot of CSS3 tags. Here’s an easy way to use it in Drupal:

Media Queries

Automatically works out how wide the browser is and so tells the media on the screen how large it needs to be. Code sample:

<link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css">
<link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css">

CSS3 Fonts

Import fonts directly via CSS. Google has a font library available with live previews and implementation options: This will make your site a touch slower but it much easier than older solutions.


  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Notify of

1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
12 years ago

Thank you for the thoughtful review. The main advantage of html5 video player seems to be for embedding rich media such as audio and video in modern browsers. Although, the structure elements seem to be useful. CSS3 seems to be headed in the right direction, leaving many possibilities for implementation and creativity,

Would love your thoughts, please comment.x