the future of html lachlan hunt 2007-01-25. html timeline vs. html 1.0 sgml rfc 1866 199019951997...
TRANSCRIPT
The Future of HTML
Lachlan Hunt
2007-01-25
HTML Timelinevs.
HTML 1.0
SGML
<blink><marquee>
<font>
RFC 1866
1990 1995 1997 1999 200019981996 2001 2002
XHTML 2.0Begins…
?WHATWG
The Web Hypertext Application Technology Working Group
WHATWG Goals
Document real-world browser behaviour Document and standardise useful extensions Develop practical new features Ensure backwards compatibility Define robust error handling
Web Applications 1.0 Web Forms 2.0
Web Controls 1.0
HTML 5
The Specs
Web Applications 1.0
Syntax and Parsing Requirements Structure and Semantics DOM APIs
Web Forms 2.0
Form Controls Repetition Model Client Side Validation DOM APIs for Forms
Web Controls 1.0
DOM and CSS Extensions for creating custom form controls and widgets
Document Representations
Document
DOM
HTML 5
text/html
XHTML 5
application/xhtml+xml
Browser Support for HTML
Parsing real world HTML is a nightmare Browsers forced to handle everything
gracefully Lack of interoperability Many proprietary extensions; often reversed
engineered from each other
STRONG
EM#text: a
#text: b
#text: c
p
EMSTRONG
EM#text: a
#text: b #text: c
p
STRONG
EM#text: a
#text: b #text: c
p
Interoperability Issues<p><strong>a<em>b</strong>c</em>
HTML 5 Parsing
Reverse engineering current browsers Compatible with existing browsers and web
pages Thoroughly defines error handling
DOCTYPE and DTDs
2 Practical Purposes: DTD based Validation DOCTYPE Sniffing
HTML 5 does not have an official DTD Conformance Checkers may use better
alternatives Still need to trigger Standards Mode!
HTML 4.01 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html>
The DOCTYPE
<header>
<footer>
<section><nav> <aside>
<article>
<div id="header">
<div id="footer">
<div id="content"><divid="nav">
<divid="right">
<div class="article">
New Structures
<progress>
<canvas>
Rating:
<meter>
<dialog><time><m><menu><command><embed><figure><details>And many more…
New Semantics
<datagrid>
<input type="datetime">
<input type="number"><input type="range"><input type="email"><input type="url">
And many more…
<input type="text" list="list"><datalist id="list"> <option value="Mr"> ...</datalist>
New Controls
Repetition Model
Add Team MemberAdd Team MemberAdd Team MemberAdd Team Member
Team Members
NameRank
Jack O'NeillJack O'Neill RemoveRemoveColonelColonel
RemoveRemoveSam CarterSam CarterMajorMajor
RemoveRemoveDaniel JacksonDaniel JacksonCivilianCivilian RemoveRemove
ContinueContinueRemoveRemoveTeal’cTeal’cAlienAlien
<tr repeat-template="member" repeat="0"> <td><input type="text" name="member0.rank"></td> <td><input type="text" name="member0.name"></td> <td><button type="remove">Remove</button></td></tr><tr repeat-template="member" repeat="1"> <td><input type="text" name="member1.rank"></td> <td><input type="text" name="member1.name"></td> <td><button type="remove">Remove</button></td></tr><tr id="member" repeat="template" repeat-start="2"> <td><input type="text" name="member[member].rank"></td> <td><input type="text" name="member[member].name"></td> <td><button type="remove">Remove</button></td></tr>
<tr id="member" repeat="template" repeat-start="2"> <td><input type="text" name="member[member].rank"></td> <td><input type="text" name="member[member].name"></td> <td><button type="remove">Remove</button></td></tr>
<button type="add" template="member">Add Team Member</button>
Required Fields<input type="email" required="required">
Regular Expressions<input type="text" pattern="[A-Za-z0-9_\-]+">
Minimum and Maximum Values<input type="range" min="20" max="80">MaxLength for textarea<textarea maxlength="2000"></textarea>
And many more…
Client-Side Form Validation
DOM APIs
DOM Level 0 APIs Client-Side Session and Persistent Storage Audio Communication
Server-Sent DOM Events Network Connections Cross-Document Messaging
Any Questions or Comments?
Lachlan Hunt
http://lachy.id.au/
http://whatwg.org/