origins
specs v. reality
HTML as SGML
<em/content/
virtually all real-world markup is invalid HTML
browsers parse HTML in a way very unlike SGML
XHTML is an XML application
virtually all real-world XHTML
...is served as text/html
...is not well-formed XML
...is parsed as HTML
authors don't write SGML or XML
view source
cut-and-paste
cobble together
google for help
derided as tag soup
tag soup simply is the web
existing standards do not reflect this reality
this reality is billions of documents
long-term survival of our cultural output
HTML5
HTML5 specs HTML "as she are spoke."
http://whatwg.org/html5
not defined in terms of SGML
not defined in terms of previous (X)HTML standards
defined at DOM level
two serializations
A) one XML (XHTML5)
draconian error handling
B) one based on the way HTML works out there today (HTML5)
interoperable, well-defined error handling
born out of reverse-engineering
lurching toward interoperability
converging behavior
not just for browsers
non-browser HTML processors
move aside, tidy
even c
separate java parser
conformance levels
browsers have to support legacy content
<table> for layout
bed and breakfast
browsers have to interoperate
mismatched tags
what <b>does <i>this</b> look</i> like?
document conformance != UA conformance
what's changed
doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/... blah blah blah
No SGML means no public identifier, no DTD
<!DOCTYPE html>
standards mode in Opera, IE, Firefox, Safari
dropped elements
<acronym>, <basefont>
<big>, <center>, <dir>
<isindex>
<frame>, <frameset>
<noframes>, <noscript>
<s>, <strike>, <tt>, <u>
dropped attributes
pretty much all the presentational ones
browsers still required to handle them
"New" elements and attributes
@contenteditable
<article>, <section>
<header>, <footer>
<style @scoped>
<dialog>, <figure>
<aside>, <nav>
etc.
http://code.google.com/webstats/
new APIs
history
server-sent events via <event-source>
document.getElementsByClassName()
note related WebAPI work
querySelector(), querySelectorAll()
specced innerHTML
element .classList
offline web apps
html@manifest
client-side storage
db = openDatabase("widgets", 1,
"Widgets", 10485760);db.transaction(function(trans) {
widgets = trans.executeSql(
"select id, name \
from widgets");
// do something with them..
});2D Graphics API
<canvas>
<audio> and <video>, <embed>
browsers would have to support <embed> anyway
drag and drop
<input type="range">
<input type="email">
<input type="url">
<input type="time">
<input type="date">
<input autofocus>
<input autocomplete>
<output>
templates
etc.
looking forward
what can I use from HTML5 now?
more support every day
<canvas>, @autocomplete, @contenteditable
new profiling of existing elements, e.g.
sectioning algorithm & <address> scoping
semantics of b, i, hr, small, strong
emphasis v. importance
Relationship between <cite>, <q>, and <blockquote>
avoid @longdesc, @rev, all presentational attributes
Preparing HTML5-aware HTML4 & XHTML 1
charset declaration
new elements and @class
<figure> becomes <div class="figure">
<dialog> becomes <dl class="dialog">
current issues
Namespace URL & XHTML2
Extensibility, SVG, and MathML
WAI-ARIA and @role
error-handling and @style
etc.
you can help!
http://whatwg.org/ http://www.w3.org/html/wg/
drink from the public-html firehose
thank you
slides