html5
DESCRIPTION
What happened to XHTML 2.0 and how did HTML5 come about? What kind of new features (many already supported in modern browsers) are driving HTML5 adoption? HTML5 is the flavor of html you will be writing for the next 10 years. Time to get started!TRANSCRIPT
Ben MacNeillUser Interface Designer, eXtensionNC State University
May 26, 2010http://www.slideshare.net/chillnc/
HTML5 vs XHTML 2The Future of Web Development
Spoiler: XHTML 2 Loses
http://www.flickr.com/photos/21402026@N05/3714619072/
No really, it’s dead.“Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed.”
- www.w3.org, July 2nd, 2009
95HTML 2.0 (IETF)
96IETF => W3C
99HTML 4.01 (W3C)
HTML 4.01 XHTML 1.0tag-for-tag identical, different syntax
Why XHTML(in 1999)
• Emergence of web standards
• Browsers starting supporting CSS
• More structured markup was welcomed
• Easier to parse
• Extensible (SVG, MathML)
mimetype
http://www.flickr.com/photos/janlewandowski/3210986710/
content="text/html"
content="application/xhtml+xml"
VS
XHTML 1.1 (real XML)
http://www.flickr.com/photos/indi/132659074/
Draconian Error Handling
(all because there's a missing <p> tag)
02XHTML 2.0 (W3C)
http://www.flickr.com/photos/samjudson/47940677/
WHATWG
Web Hypertext Application Technology Working Group
04Web Forms 2.0Web Apps 1.0
Meanwhile, XHTML 2 is doing just fine
http://www.flickr.com/photos/cheltenhamboroughcouncil/1321299695/
06HTML5
(WHATWG => W3C)
XHTML 2 is still doing finehttp://www.flickr.com/photos/lstcaress/1451618395/
09HTML5 features
showing up
Er...
http://www.flickr.com/photos/smailtronic/2817629219/
Nothing to be scared of
“If you are currently creating websites with any version of HTML, you’re already using HTML5”
- Jeremy Keith
So What is HTML5?
• New form elements
• New semantic elements
• Video and canvas elements
• Offline caching
• Local database API
Start Today
<!DOCTYPE html>
Already support many HTML5 features
9
New Semantic Elements<section><header><footer><nav>
<article>
IE: Never Fails to Disappoint
<style type="text/css"> article {display:block; border:1px solid red;}</style>...<article><h1>Welcome to Initech</h1><p>This is your <span>first day</span>.</p></article>
http://diveintohtml5.org/semantics.html#unknown-elements
• no styles, empty node
The Hack<script>document.createElement("article");</script>
http://diveintohtml5.org/semantics.html#unknown-elements
• HTML5 enabling script: http://remysharp.com/2009/01/07/html5-enabling-script/
• Works all the back to IE6
• just create it, don't have to insert into DOM
Awesome New Form Elements<input type="search">
<input type="number">
<input type="range">
<input type="color">
<input type="tel">
<input type="url">
<input type="email">
<input type="date">
<input type="time">
for search boxes
for spinboxes
for sliders
for color pickers
for phone numbers
for web addresses
for email addresses
for calendar date pickers
for timestamps
type="email"
= Contextual Keyboards
Other form goodies
• placeholder text (FF, S, C, Op)
• automatic input validation (O)
• autofocus fields (S,C,O)
<video>
source: http://yfrog.com/83n4fp*not really Apple's response
Offer HTML5 <video>
• CNN
• Reuters
• New York Times
• Vimeo
• Time
• ESPN
• NPR
• The White House
• Sports Illustrated
• Flickr
• CBS
• MSNBC
http://www.apple.com/ipad/ready-for-ipad/
<canvas>http://mrdoob.com/projects/harmony/
Writing to Canvasfunction draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);}
http://diveintohtml5.org/canvas.html#shapes
Offline Web Apps
• Offline caching
• Local database API
<html manifest="/cache.manifest">
localStorage orSQL engine
Further Reading• Dive into HTML5 http://diveintohtml5.org/
(hopefully coming out in June. Looks great!)
• http://www.alistapart.com/articles/a-brief-history-of-markup/
• http://dev.w3.org/html5/markup/spec.html
• http://www.alistapart.com/articles/previewofhtml5
http://www.slideshare.net/chillnc/http://delicious.com/chillnc/html5
Thanks!