1 / 21

The Future of HTML

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.

hisano
Download Presentation

The Future of HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Future of HTML Lachlan Hunt 2007-01-25

  2. 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

  3. WHATWG ? The Web Hypertext Application Technology Working Group

  4. WHATWG Goals • Document real-world browser behaviour • Document and standardise useful extensions • Develop practical new features • Ensure backwards compatibility • Define robust error handling

  5. Web Applications 1.0 Web Forms 2.0 Web Controls 1.0 The Specs HTML 5

  6. Web Applications 1.0 • Syntax and Parsing Requirements • Structure and Semantics • DOM APIs

  7. Web Forms 2.0 • Form Controls • Repetition Model • Client Side Validation • DOM APIs for Forms

  8. Web Controls 1.0 • DOM and CSS Extensions for creating custom form controls and widgets

  9. HTML 5 XHTML 5 text/html application/xhtml+xml Document Representations Document DOM

  10. 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

  11. 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>

  12. HTML 5 Parsing • Reverse engineering current browsers • Compatible with existing browsers and web pages • Thoroughly defines error handling

  13. 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!

  14. 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">

  15. New Structures <header> <divid="header"> <nav> <div id="nav"> <section> <divid="content"> <aside> <divid="right"> <article> <divclass="article"> <footer> <divid="footer">

  16. <datagrid> <canvas> Rating: <meter> <progress> New Semantics <m> <command> <details> <dialog> <figure> <time> <menu> <embed> And many more…

  17. <inputtype="text"list="list"> <datalistid="list"> <optionvalue="Mr"> ... </datalist> <inputtype="url"> <inputtype="email"> <inputtype="datetime"> <inputtype="number"> <inputtype="range"> New Controls And many more…

  18. 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>

  19. 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…

  20. DOM APIs • DOM Level 0 APIs • Client-Side Session and Persistent Storage • Audio • Communication • Server-Sent DOM Events • Network Connections • Cross-Document Messaging

  21. Any Questions or Comments? Lachlan Hunt http://lachy.id.au/ http://whatwg.org/

More Related