1. Practical HTML 5
    Edward O'Connor
    SDWSG

  2. origins

  3. specs v. reality

  4. HTML as SGML

  5. <em/content/

  6. virtually all real-world markup is invalid HTML

  7. browsers parse HTML in a way very unlike SGML

  8. XHTML is an XML application

  9. virtually all real-world XHTML

  10. ...is served as text/html

  11. ...is not well-formed XML

  12. ...is parsed as HTML

  13. authors don't write SGML or XML

  14. view source

  15. cut-and-paste

  16. cobble together

  17. google for help

  18. morons and assholes

  19. derided as tag soup

  20. tag soup simply is the web

  21. existing standards do not reflect this reality

  22. this reality is billions of documents

  23. long-term survival of our cultural output

  24. HTML5

  25. HTML5 specs HTML "as she are spoke."

  26. http://whatwg.org/html5

  27. not defined in terms of SGML

  28. not defined in terms of previous (X)HTML standards

  29. defined at DOM level

  30. two serializations

  31. A) one XML (XHTML5)

  32. draconian error handling

  33. yellow screen of death

  34. B) one based on the way HTML works out there today (HTML5)

  35. interoperable, well-defined error handling

  36. born out of reverse-engineering

  37. lurching toward interoperability

  38. converging behavior

  39. not just for browsers

  40. non-browser HTML processors

  41. move aside, tidy

  42. html5lib

  43. python & ruby

  44. even c

  45. separate java parser

  46. conformance levels

  47. browsers have to support legacy content

  48. <table> for layout

  49. bed and breakfast

  50. browsers have to interoperate

  51. mismatched tags

  52. what <b>does <i>this</b> look</i> like?

  53. document conformance != UA conformance


  54. what's changed

  55. doctype

  56. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/... blah blah blah

  57. No SGML means no public identifier, no DTD

  58. <!DOCTYPE html>

  59. standards mode in Opera, IE, Firefox, Safari

  60. dropped elements

  61. <acronym>, <basefont>

  62. <big>, <center>, <dir>

  63. <isindex>

  64. <frame>, <frameset>

  65. <noframes>, <noscript>

  66. <s>, <strike>, <tt>, <u>

  67. dropped attributes

  68. pretty much all the presentational ones

  69. browsers still required to handle them

  70. "New" elements and attributes

  71. @contenteditable

  72. <article>, <section>

  73. <header>, <footer>

  74. <style @scoped>

  75. <dialog>, <figure>

  76. <aside>, <nav>

  77. etc.

  78. http://code.google.com/webstats/

  79. new APIs

  80. history

  81. server-sent events via <event-source>

  82. document.getElementsByClassName()

  83. note related WebAPI work

  84. querySelector(), querySelectorAll()

  85. specced innerHTML

  86. element .classList

  87. offline web apps

  88. html@manifest

  89. client-side storage

  90. db = openDatabase("widgets", 1,
      "Widgets", 10485760);
  91. db.transaction(function(trans) {
      widgets = trans.executeSql(
        "select id, name \
        from widgets");
      // do something with them..
    });
  92. 2D Graphics API

  93. <canvas>

  94. <audio> and <video>, <embed>

  95. browsers would have to support <embed> anyway

  96. drag and drop

  97. Web Forms 2.0

  98. <input type="range">

  99. <input type="email">

  100. <input type="url">

  101. <input type="time">

  102. <input type="date">

  103. <input autofocus>

  104. <input autocomplete>

  105. <output>

  106. templates

  107. etc.


  108. looking forward

  109. what can I use from HTML5 now?

  110. engine support for new features

  111. more support every day

  112. <canvas>, @autocomplete, @contenteditable

  113. new profiling of existing elements, e.g.

  114. sectioning algorithm & <address> scoping

  115. semantics of b, i, hr, small, strong

  116. emphasis v. importance

  117. Relationship between <cite>, <q>, and <blockquote>

  118. avoid @longdesc, @rev, all presentational attributes

  119. Preparing HTML5-aware HTML4 & XHTML 1

  120. diffs from HTML4

  121. html5 validator

  122. charset declaration

  123. new elements and @class

  124. <figure> becomes <div class="figure">

  125. <dialog> becomes <dl class="dialog">

  126. current issues

  127. Namespace URL & XHTML2

  128. Extensibility, SVG, and MathML

  129. WAI-ARIA and @role

  130. error-handling and @style

  131. etc.

  132. you can help!

  133. http://whatwg.org/ http://www.w3.org/html/wg/

  134. drink from the public-html firehose

  135. thank you
    slides

    cc by-sa 3.0