Fork me on GitHub

Drupal 8 HTML 5 Status

Drupal HTML 5 Logo

Eric J. Duran

Lullabot

Drupalize.me

HTML5? OMGWTFBBQ?

There a lot better resources for that than me.


Better resources:

The DOCTYPE!

Drupal 7: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> Drupal 8: <!DOCTYPE html> #1077566: Convert html.tpl.php to HTML5

Semantics

Article

<div id="node-n" class="article">... </div> <article id="node-n">...</article>" #1077602: Convert node.tpl.php to HTML5

Comments

<div class="comment">... </div> <article class=comment">... </article> #1189816: Convert comment.tpl.php to HTML5

Page

<div id="page">
  <div id="header">...</div>
  <div id="navigation">...</div>
  <div id="footer">...</div>
</div>
<div id="page">
  <header role="banner">...</header>
  <nav role="navigation">...</nav>
  <footer role="contentinfo">...</footer>
</div>
#1077578: Convert comment.tpl.php to HTML5

What about ie?

SHIV!!!! Drupal HTML 5 Logo
#1077878: Added HTML5shiv to core

Oh we also ugraded to the latest version of jQuery. So no need for the innerShiv

#1328900: Update to jQuery 1.7.

Forms

Form Elements

email: #1174620: Add new HTML5 FAPI element: email
url: #1174630: Add new HTML5 FAPI element: url
search: #1174628: Add new HTML5 FAPI element: search
tel: #1174634: Add new HTML5 FAPI element: telephone
number: #1174640: Add new HTML5 FAPI element: number
range: #1174646: Add new HTML5 FAPI element: range




Form Attributes

placeholder: #1174694: Allow FAPI usage of the placeholder attribute
pattern: #1174766: Support the pattern attribute
required: #1174938: support the HTML5 #required FAPI property
formnovalidate: #1174938: support the HTML5 #required FAPI property


All available in Drupal 6/7 with html5_tools

Other random stuff

Css3 resize attributes



#1138258: Drop textarea.js in favor of CSS3 resize

Media elements video/audio

<video src="..../Ara_chloroptera.ogg" >
css:
-webkit-box-reflect: right 10px;
#1138258: Rich media display with

Drupal Resources

irc: #drupal-html5

http://groups.drupal.org/html5
HTML5 Tools
#html5 tags on Drupal core
HTML5 Initiative

- Meeting every other Tuesday at 4pm

- Office hours every Sunday 1-3pm EST in #drupal-html5

- @drupal8html

About

Presentation for DrupalCampNJ

Use a spacebar or arrow keys to navigate