Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Zen: Identify HTML5 Markup in Templates

Video loading...

Transcripts: 
Transcript file: 
f93caf52-1b85-499b-9f06-7c23c9234cf3---eng.srt
Transcript language code: 
eng

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:04
    Let's take a look at some of the template files in Zen, so we can see how HTML5 markup was incorporated into the templates.
  • 0:12
    Navigated to sites/all/themes/zen.
  • 0:16
    And as a base theme, my theme, zendemo, which is the default theme right now, is going to inherit these template files.
  • 0:25
    So unless I override them, which I can certainly do, these are the template files that are going to apply in my theme.
  • 0:32
    So let's take a look at a couple of these, like the comment.tpl.php, and the comment wrapper, and the node and the page.
  • 0:41
    So, first, if we take a look at the comment.tpl.php, right away, right off the bat, you can see some HTML5 markup
  • 0:48
    such as the article tag, the header tag, the mark tag and the footer tag.
  • 0:56
    So there's just one example of how HTML5 markup was incorporated.
  • 1:02
    By contrast, if we take a look at the Drupal core theme Bartik, and take a look at the comment.tpl.php, you can see that it's all divs.
  • 1:11
    So we've got divs all the way down, divs and spans. There's some header tags here. And that's the default markup for Bartik.

Markup in Drupal

Loading ...

Zen: Identify HTML5 Markup in Templates

Loading...
4 minutes 19 seconds // Drupal 7 // HDCC //

In this tutorial, I will take you on a tour of some of the template files included with Zen and highlight how HTML5 semantic markup was incorporated into the markup of several different template files.

Downloads: 
Log in or sign up to download companion files.
Additional resources: 

Zen — Drupal.org
Zen documentation — Drupal.org
HTML5 Developer Guide — MDN