210 likes | 340 Views
The Future of HTML. Lachlan Hunt 2007-01-25. vs. 1990. 1995. 1996. 1997. 1998. 2000. 2001. 2002. 1999. SGML. RFC 1866. HTML Timeline. <blink>. <marquee>. <font>. XHTML 2.0 Begins…. HTML 1.0. WHATWG. ?. The Web Hypertext Application Technology Working Group. WHATWG Goals.
E N D
The Future of HTML Lachlan Hunt 2007-01-25
vs. 1990 1995 1996 1997 1998 2000 2001 2002 1999 SGML RFC 1866 HTML Timeline <blink> <marquee> <font> XHTML 2.0 Begins… HTML 1.0
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 The Specs HTML 5
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
HTML 5 XHTML 5 text/html application/xhtml+xml Document Representations Document DOM
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
p p EM STRONG STRONG #text:a EM #text:a EM #text:c #text:b #text:b #text:c p STRONG #text:a EM #text:b #text:c 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 <!DOCTYPEhtmlPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> The DOCTYPE <!DOCTYPEhtml> HTML 4.01 Strict <!DOCTYPEhtmlPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
New Structures <header> <divid="header"> <nav> <div id="nav"> <section> <divid="content"> <aside> <divid="right"> <article> <divclass="article"> <footer> <divid="footer">
<datagrid> <canvas> Rating: <meter> <progress> New Semantics <m> <command> <details> <dialog> <figure> <time> <menu> <embed> And many more…
<inputtype="text"list="list"> <datalistid="list"> <optionvalue="Mr"> ... </datalist> <inputtype="url"> <inputtype="email"> <inputtype="datetime"> <inputtype="number"> <inputtype="range"> New Controls And many more…
Colonel Jack O'Neill Remove Major Sam Carter Remove Civilian Daniel Jackson Remove Repetition Model Team Members <trrepeat-template="member"repeat="0"> <td><inputtype="text"name="member0.rank"></td> <td><inputtype="text"name="member0.name"></td> <td><buttontype="remove">Remove</button></td> </tr> <trrepeat-template="member"repeat="1"> <td><inputtype="text"name="member1.rank"></td> <td><inputtype="text"name="member1.name"></td> <td><buttontype="remove">Remove</button></td> </tr> <trid="member"repeat="template"repeat-start="2"> <td><inputtype="text"name="member[member].rank"></td> <td><inputtype="text"name="member[member].name"></td> <td><buttontype="remove">Remove</button></td> </tr> <trid="member"repeat="template"repeat-start="2"> <td><inputtype="text"name="member[member].rank"></td> <td><inputtype="text"name="member[member].name"></td> <td><buttontype="remove">Remove</button></td> </tr> Rank Name Remove Add Team Member Add Team Member Alien Teal’c Continue Remove <buttontype="add"template="member">Add Team Member</button>
Client-Side Form Validation Minimum and Maximum Values <inputtype="range"min="20"max="80"> Regular Expressions <inputtype="text"pattern="[A-Za-z0-9_\-]+"> MaxLength for textarea <textareamaxlength="2000"></textarea> Required Fields <inputtype="email"required="required"> And many more…
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/