The document discusses HTML5 and its integration with Drupal. It introduces HTML5 features like audio, video, canvas, forms, semantic markup tags. It notes that making existing Drupal templates HTML5 compliant can be easy, but that Drupal core would need significant changes to fully support HTML5, such as reworking how it generates markup. It urges the Drupal community to start work on these changes now to support HTML5 properly in Drupal 8.

1. HTML5
all your Drupal XHTML belong to us
Jen Simmons
aka: jensimmons
(creator of Bartik)
Sunday, August 22, 2010

2. jen.cm/h
Sunday, August 22, 2010

3. HTML5 for Web Designers
Jeremy Keith
Sunday, August 22, 2010

4. Introducing
HTML5
Bruce Lawson
Remy Sharp
Sunday, August 22, 2010

5. HTML5 Awesomeness
(That I’m not going to talk about)
• <audio> • geolocation
• <video> • web workers
• <canvas> • messaging API
• data storage • web sockets
• applicationCache • javascript APIs
Sunday, August 22, 2010

6. HTML5 Forms
• <input type=text> • <input type=range>
• <input type=email> • <input type=color>
• <input type=url> • <input type=text>
• <input type=date> • <input type=tel>
• <input type=time> • <input type=week>
Sunday, August 22, 2010

7. HTML5 Form
Attributes
• autocomplete, min, max, multiple, pattern,
step, required, placeholder
• <input type=email required>
• <input type=range min=1 max=11 name=tap>
Sunday, August 22, 2010

8. HTML5 Markup
• <section> • <footer>
• <aside> • <time>
• <article> • <nav>
• <header> • <small>
• <hrgoup> • <mark>
plus ARIA Roles
Sunday, August 22, 2010

9. HTML5 Header
• <meta charset=“UTF-8”>
• <link rel=”stylesheet” href=“file.css”>
• <script src=“file.js”></script>
Sunday, August 22, 2010

10. A Node in HTML5
<article id="node-title" class="node clearfix" >
<header>
<h2 class="title"><a href="xxx">My First Node</a></h2>
<small>Published on <time datetime=2010-08-22 pubdate>
August 22, 2010</time></small>
</header>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<footer>
<nav class="taxonomy"><ul><li><a>HTML5</a></li></ul> </nav>
</footer>
</article> <!-- /node-->
Sunday, August 22, 2010

11. HTML5: Pieces of Cake
• <! doctype html>; just change it in the theme
• marking up the page.tpl.php file with HTML5
elements, just do it. Also block.tpl, node.tpl…
Sunday, August 22, 2010

12. Harder: HTML Deep in Drupal
• $submitted
• menus
• $head
• $styles, $scripts
• input forms
• ??????
Sunday, August 22, 2010

13. Sunday, August 22, 2010

14. Solution: Short-term
override everything Drupal does when it makes HTML
Sunday, August 22, 2010

15. Solution: Long-term
We may need to seriously rethink how Drupal makes HMTL
• Allow people developing Drupal sites to more-easily
change the HTML markup
• Might mean putting Semantic Views, Semantic
CCK, Semantic Menus, Semantic Everything
—> into Core
• Or doing something else that’s pretty radical
Sunday, August 22, 2010

16. Bottom Line
• HTML5 is all about the markup being more
semantic, and conveying information about
the content and the context of that content.
• If Drupal gets a reputation of “yeah, but you
can’t really do HMLT5 in Drupal without a
whole lot of hard work” — we will be in trouble.
Sunday, August 22, 2010

17. Bottom Line
• The time to get this right is Drupal 8.
• We need to change Drupal so it can do
HTML5, well, and correctly.
• And we need to start now.
Sunday, August 22, 2010

18. MORE
• http://groups.drupal.org/html5
• http://groups.drupal.org/node/82664
• HTML Tools http://drupal.org/project/html5_tools
• Elements http://drupal.org/project/elements
• HTML Base http://drupal.org/project/html5_base
Sunday, August 22, 2010