Tantek Çelik tantek.com @t
Why HTML5?
Why HTML5?
“We're betting big on HTML 5.”
— Vic Gundotra, Google“The world is moving to HTML5.”
— Steve Jobs, Apple“The future of the web is HTML5.”
— Dean Hachamovitch, Microsoft
HTML5Rocks.com
apple.com/html5
ie.microsoft.com/testdrive/
For Example
What is HTML5?
- Practical Upgrade to HTML4/XHTML
- New Forms Capabilities
- Native Multimedia
- Core of the Open Web App Platform
Where did HTML5 come from?
Where did HTML5 come from?
Where did HTML5 come from?
- Great Web Schism of 2004
- microformats and WHATWG standards groups
- 5 recent years of heated divergence
- HTML4 + XHTML1 evolved into Web Apps / HTML5
- 2009 W3C dropped XHTML2 to focus on HTML5
What HTML5 can I use now?
Parts of HTML5 are:
- dependable now
- roughly usable
- unfortunately awkward
- interesting but ignorable
- worthy of web application experiments
Dependable HTML5
Dependable HTML5: Drama!
- InfoWorld article (mis?)quoting W3C:
"... it's a little too early to deploy it [HTML5] because we're running into interoperability issues ..."
"I don't think it's ready for production yet,"
"The real problem is can we make [HTML5] work across browsers and at the moment, that is not the case."
- Wrong. Plenty that interoperates across browsers.
Dependable HTML5: DOCTYPE
- Old SGML heritage DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - New DOCTYPE
<!DOCTYPE html>
Dependable HTML5: meta charset
- Old meta http-equiv charset
<meta http-equiv="content-type" content="text/html; charset=utf-8"> - Simpler meta charset
<meta charset="utf-8">
Your First HTML5 Document
<!DOCTYPE html><meta charset="utf-8"><title> Hello </title><p> World Wide Web </p>- That's it!
- What about
<html> <head> <body>tags?
Dependable: XHTML compatibility
- Self-close empty HTML4 tags, e.g.
<br/> <embed/> <hr/> <img/> <input/> <link/> <meta/>
- Always use quoted attribute values
<img src=photo1.jpg>→<img src="photo1.jpg"/>
- Explicit tags for a consistent DOM
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ... </title> </head> <body> ... </body> </html><table> <tbody> <tr> <td> ... </td> </tr> </tbody> </table>
Dependable HTML5: refined, restored
- refined:
<em> <strong> - upgraded:
<b> <i> <br> <hr> <s> <small> - restored:
<iframe> target <li value> start - acknowledged:
<embed>
Dependable HTML5: New Semantics
<section>- thematic grouping of content<header>- intro/nav/headings<nav>- navigation links<footer>- info about section, author, copyright
Dependable HTML5: New Semantics
<article>- self-contained post, news, comment- also a special type of
<section>
- also a special type of
<aside>- tangential content, side comments<hgroup>- related multilevel headings
Dependable HTML5: Bulletproofing
- New tags stylable in all modern browsers...
- except Internet Explorer 8 and earlier
- Bulletproof Web Design by Dan Cederholm
- Bulletproof AJAX by Jeremy Keith
- Introducing a Bulletproof HTML5 technique:
- Use a nested div with semantic class name, e.g.:
<article><div class="article">...</div><article>....article { /* article styling here */ }
- Use a nested div with semantic class name, e.g.:
Dependable HTML5: Bulletproofing
- Add more classes (microformats) to nested div:
<article><div class="article hentry">...</div><article> - Some new tags disallow nested divs
- Use a containing div in those cases:
<div class="hgroup">
<hgroup>...</hgroup></div>
Dependable HTML5: audio & video
<audio src></audio>- like img for sound<video src></video>- video plugin alternative- numerous sites using HTML5 video today
- try archive.org open source movies (e.g. BarCampSF)
Dependable HTML5: video formats
- Chrome, Safari, IE9 support H.264
- Chrome, Firefox, Opera support Ogg
- Chrome, Firefox, Opera also support VP8
- Keep up with the WebM Project
Dependable HTML5: sources, fallback
<source src>- publish H.264 and Ogg (or VP8)<video controls> <source src="http://example.com/vid.mp4"> <source src="http://example.com/vid.ogv"> <object data="http://example.com/vid.mp4"> <embed src="http://example.com/vid.swf"> </object> </video>- Browser uses first format it can handle
<object><embed>for older browser fallback
Dependable HTML5: Validating
- New validator: validator.nu
- Use the new validator favelet (from favelets.com)
- W3C validator now also supports HTML5
- Verify all your changes are still valid
- Make any necessary fixes and revalidate
Roughly Usable HTML5 + more
Roughly Usable HTML5: Canvas
<canvas>- drawing with javascript
Roughly Usable HTML5: Canvas
- Modern browser support (except IE8 and below)
- Requires good design for fallback content
- Accessibility techniques still being developed
- Recommendation:
- decorative images and experiments only for now
Roughly Usable: Geolocation API
- Browser API for sites to request user location
- The only "Web App" API that is a CR!
- Modern browser support (except IE)
- Hopeful, consider tweeting: Dear @IE
- Fallback: enter location form
- Recommendation: Use it, provide fallback
Unfortunately Awkward HTML5
Awkward HTML5: new form inputs
Awkward HTML5: date time inputs
Awkward HTML5: new form inputs
- Some partial support of new inputs
- Try them in Opera to get an idea
- Strange behaviors
- Undefined restylability
- Ok fallback textbox behavior
- Note: unpredictable future page UI changes
Awkward HTML5: meter, progress
<meter> <input type="range"> <progress>- Recent Safari progress:
- Unclear how to restyle, customize
Awkward HTML5: workable features
- A few hopeful forms features:
<input type="search">autofocusattribute - upon page loadplaceholderattribute - suggestionsrequiredattribute - for form submission
Worthy of Web App Experiments
Web App Experiments
- Spun off API specs — not quite ready “now”
- Minimal or experimental browser support only
Web App Experiments are Drafts
- All working drafts (or editor's drafts)
Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways.
- All of these Web APIs could change.
- If you want to depend on them, you must keep up
Keeping up with HTML5
Help HTML5 Evolve
Review: What is HTML5?
- Practical Upgrade to HTML4/XHTML
- New Forms Capabilities
- Native Multimedia
- Core of the Open Web App Platform
Case Study: S5 - Upgraded
S5
- Simple
- Standards-based
- Slide-
- Show
- System
S5
- 2003 SXSW HTML+CSS+JS slides
- Eric Meyer made a public domain slide template
- Some markup + style upgrades
- You're soaking in it
S5
- HTML5:
<hgroup> <footer> - CSS3:
.incremental {opacity: 0;} .incremental,.current { -moz-transition: opacity .5s linear; -webkit-transition: opacity .5s linear; -o-transition: opacity .5s linear; }
S5
- microformats: hCalendar hCard XOXO
- For rich semantics + search engines
- Firefox: Operator
- Chrome: Michromeformats
Conclusion
- Get started today
- Update your pages with HTML5 + microformats
- Enhance with new HTML5 graphics, multi-media
- Validate, Fix, Repeat and Publish your HTML5 site!
- Follow updates, Give feedback,
Help move the web forward