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?
Parts of HTML5 are:
- dependable now
- roughly usable
- unfortunately awkward
- interesting but ignorable
- worthy of web application experiments
Dependable HTML5
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">
Demo: Something From Nothing
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> <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>- alternative to video plugins- numerous sites using HTML5 video today
- try archive.org open source movies (e.g. BarCampSF)
Demo: HTML5 Video
Dependable HTML5: video formats
- Safari and IE9 support H.264
- Chrome, Firefox, Opera support Ogg
- Chrome, Firefox, Opera also support VP8
- Keep up with the WebM Project
Demo: HTML5 Video Sources
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
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
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
- Summary spec: HTML: The Markup Language
- Books: Introducing HTML5
- HTML5 For Web Designers
- BSP: HTML5 Now! - tantek.com/html5now
- Follow blogs
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; }
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