HTML5 (base) theme for Drupal 7?

laura s's picture

I've done some googling but haven't found much on this. So I'm posting this because where else should a discussion, info pointers, soundings off, etc happen than in D4D?

  • Who's interested in this topic and pursuing implementations? (Who already is? I know there's some kind of Zen theme effort.)
  • What are the challenges?
  • What does this mean about the RDFa layer?
  • Where are some ongoing current discussions on this?




jensimmons's picture

I thought seriously (for weeks) about dong Bartik in HTML5, but didn't because of the D7 emphasis on RDFa. IMO, a HTML5 base theme for Drupal 7 would be a great thing. It would be a easy way for many of us to collaborate on figuring out how to best implement HTML5 for Drupal.

I did some initial work on

Garrett Albright's picture

I did some initial work on "porting" Zen with HTML 5 - it was surprisingly easy. I was considering revisiting the idea once the D7 port of Zen becomes more settled.

One of the challenges is that HTML 5 is still a bit of a moving target. Not so much that it can't be overcome with active development, but there are some things which aren't concrete yet, or seem to be concrete but will actually change in the future. And then, of course, there's IE…

To expound a bit more… HTML 5

Garrett Albright's picture

To expound a bit more… HTML 5 has us un-learn a lot of the things we learned going from HTML 4 to XHTML. For example, in HTML, if we wanted to italicize some text, HTML had us use <i>. Then XHTML came along and told us to use <em> instead. Now comes HTML 5, which uses both <em> and <i> for different usage - <em> for text which would have been emphasized if spoken, but <i> for when we want italicized text which wouldn't necessarily be emphasized, for example text in a foreign language or just a bit of typographic flourish. Given this, italicized placeholders in t() (as in t('%count of %total remaining.', array('%count' => $count, '%total' => $total))) should use <i>, but theme_placeholder()/drupal_placeholder() is currently using <em>. Fortunately, that's easy to fix - if you have it in mind to do so.

There's lots of good bits in HTML 5, but other bits - including this part - sometimes seem like they're just making things unnecessarily complicated. How's this for weirdness: <em> and its cousin <strong> can now be nested, with the nesting level depicting the level of emphasis… <strong><strong><strong>Citation needed?</strong></strong></strong> <em><em>Here</em></em> it is:

HTML5 in D6 would also be useful..

mr_spark's picture

I'm also interested in this. Despite some parts of HTML5 being a moving target, i think there's no reason we couldn't jump in and start experimenting.
I'm a little hesitant, however, given my unfamiliarity with D7. I'd be more comfortable work in D6 right now, given the tricks that may be needed to support old browsers, etc.
I realize by the time a real usable theme gets rolled out, we'll all likely be into D7, but it seems like there could be plenty of use for a D6 theme (or themes).

I've done a few custom HTML5 themes

sreynen's picture

I've done a few custom HTML5 themes in D6, but nothing general-purpose. There's really not a lot to do beyond switching the DOCTYPE in page.tpl. The HTML5 spec was designed around existing practices, so while it might be nice to use the new semantics, it shouldn't be necessary to change much at all to be valid HTML5. From there, we can be selective about which new stuff is backwards-compatible, which a lot of it is.

I'd argue something like the <em>/<i> thing is a non-issue, but those who think it is an issue should submit it as a bug. At some point, problems with HTML5 in Drupal are going to hurt Drupal adoption more than HTML5 adoption, so we should identify and solve those problems before that becomes an issue.

Regarding RDFa, as I understand it, HTML5 should be treated as XHTML(5) if sent with the appropriate content-type, which would make RDFa just as valid as it is in XHTML 1.

I came here to disagree, but

vmiliano's picture

I came here to disagree, but apparently this is now mostly true. Hooray!

XMLNS is gone from XHTML5, except for where it's necessary to maintain backward compatibility, which includes RDFa. The only issue I can foresee is that because XHTML5 is basically just like HTML5 except for the doctype and MIME type, when the RDFa working group finishes porting RDFa to HTML5, there might be subtle changes that make it different from RDFa in XHTML 1.

The recently published talks about HTML5's "distributed extensibility" concept, which is probably out of scope to talk about, since Drupal already has a huge investment in RDFa.


Percept's picture

I have been looking for a nice start for creating HTML5 themes and I found a while ago. I use a lot so a clean HTML5 base-theme based on 960 really is great. I havn't used it though since HTML5 is indeed a moving target like said above and I don't like to work around IE much (anymore)


cbovard's picture

more to follow when the theme is done.

Check out Boron

spaceninja's picture

I'm a little late to this thread, but we've got an HTML5 base theme for D7, called Boron. The goal was to change as little as possible from the stock D7 templates, but take advantage of the new doctype and elements. Like Zen, it's unstyled, so it's an ideal jumping-off point for your own design. Please check it out, and if you have any suggestions or comments, drop me a line - scott at


jp2020's picture

Very good info.


David Vespoli's picture

Was looking to start or collaborate on an html5 theme and found this. Thanks


Jeff Burnz's picture

Adaptivetheme D7 is HTML5 (which is one of my base themes), and the Boron theme is a fine effort also.

I am about to commit updated code for Adaptivetheme 7 and re-roll a new alpha, should be today/tomorrow so look out for it.

HTML5_base's picture

HTML5_base is nearly ready for a release. I'm cleaning it up and doing a code review this week. I'm already using it in a client site and it's working well.

d.o: canarymason
twitter @canarymason

foreign languages support for

ahimsauzi's picture

foreign languages support for HTML 5

I am about to embark on a project that requires HTML 5 and language support. Any suggestions, pitfalls to watch out for?