Html5

HTML5 vs XHTML 2
The Future of Web Development

Ben MacNeill
User Interface Designer, eXtension
NC State University

May 26, 2010
http://www.slideshare.net/chillnc/

Spoiler: XHTML 2 Loses

http://www.ﬂickr.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

HTML 4.01 XHTML 1.0
tag-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)

mime
type

http://www.ﬂickr.com/photos/janlewandowski/3210986710/

content=
"text/html"

VS

content=
"application/xhtml+xml"

XHTML 1.1 (real XML)

http://www.ﬂickr.com/photos/indi/132659074/

Draconian Error Handling

(all because there's a missing <p> tag)

http://www.ﬂickr.com/photos/samjudson/47940677/

WHATWG

Web Hypertext Application Technology Working Group

Meanwhile, XHTML 2
is doing just fine

http://www.ﬂickr.com/photos/cheltenhamboroughcouncil/1321299695/

XHTML 2 is still doing fine
http://www.ﬂickr.com/photos/lstcaress/1451618395/

Er...

http://www.ﬂickr.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
• Ofﬂine caching
• Local database API

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>

• no styles, empty node
http://diveintohtml5.org/semantics.html#unknown-elements

The Hack
<script>
document.createElement("article");
</script>

• 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
http://diveintohtml5.org/semantics.html#unknown-elements

Awesome New Form Elements
<input type="search"> for search boxes
<input type="number"> for spinboxes
<input type="range"> for sliders
<input type="color"> for color pickers
<input type="tel"> for phone numbers
<input type="url"> for web addresses
<input type="email"> for email addresses
<input type="date"> for calendar date pickers
<input type="time"> for timestamps

type="email"
= Contextual Keyboards

Other form goodies

• placeholder text (FF, S, C, Op)
• automatic input validation (O)
• autofocus ﬁelds (S,C,O)

*not really Apple's response
source: http://yfrog.com/83n4fp

Offer HTML5 <video>
• CNN • NPR
• Reuters • The White House
• New York Times • Sports Illustrated
• Vimeo • Flickr
• Time • CBS
• ESPN • MSNBC
http://www.apple.com/ipad/ready-for-ipad/

<canvas>
http://mrdoob.com/projects/harmony/

Writing to Canvas
function 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
• Ofﬂine caching
• Local database API
<html manifest="/cache.manifest">

localStorage or
SQL 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

Thanks!
http://www.slideshare.net/chillnc/
http://delicious.com/chillnc/html5

Html5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie Html5

Ähnlich wie Html5 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html5