Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Chronicle of the Nebulous HTML5

Avatar for Brandon Keepers Brandon Keepers
PRO
May 23, 2013
Programming
11
1k

A Chronicle of the Nebulous HTML5

Why is EVERYTHING called HTML5, how did we get here, and what's in it for me?
Avatar for Brandon Keepers

Brandon Keepers
PRO

May 23, 2013
Tweet

More Decks by Brandon Keepers

See All by Brandon Keepers
Automating Software Development
Avatar for Brandon Keepers bkeepers
PRO
3
470
Building the GitHub workspace app
Avatar for Brandon Keepers bkeepers
PRO
1
360
Contributing to Your Career
Avatar for Brandon Keepers bkeepers
PRO
4
710
A Maturity Model for Embracing Open Source Software
Avatar for Brandon Keepers bkeepers
PRO
3
910
Open Source Principles for Internal Engineering Teams
Avatar for Brandon Keepers bkeepers
PRO
8
1.4k
Carbon, Automobiles, Bebop & Fashion
Avatar for Brandon Keepers bkeepers
PRO
1
530
Tending Your Open Source Garden, v2
Avatar for Brandon Keepers bkeepers
PRO
1
590
Tending Your Open Source Garden
Avatar for Brandon Keepers bkeepers
PRO
2
970
The Loyal Renegade
Avatar for Brandon Keepers bkeepers
PRO
3
870

Other Decks in Programming

See All in Programming
OpenTelemetry + LLM = OpenLLMetry!?
Avatar for Yunosuke Yamada yunosukey
2
200
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
Avatar for ALGO ARTIS algoartis
0
250
Feature Flag 自動お掃除のための TypeScript プログラム変換
Avatar for azarashi azrsh
PRO
4
300
Instrumentsを使用した アプリのパフォーマンス向上方法
Avatar for hinakko hinakko
0
260
Browser and UI #2 HTML/ARIA
Avatar for ken7253 ken7253
2
190
バランスを見極めよう！実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
Avatar for whatasoda whatasoda
2
370
Rethinking Data Access: The New httpResource in Angular
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
Avatar for dachi023 dachi023
0
160
SpringBootにおけるオブザーバビリティのなにか
Avatar for irof irof
1
680
20250426 GDGoC 合同新歓 - GDGoC のススメ
Avatar for Yoshimura Naoya getty708
0
120
Storybookの情報をMCPサーバー化する
Avatar for Shota Iwamatsu shota_tech
3
1.4k
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
Avatar for shiro seike seike460
2
600

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
30
950
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
91
6k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
187
11k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.2k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.8k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k

Transcript

  1. HTML5 A CHRONICLE OF THE NEBULOUS extracted from the annals

    of history by Brandon Keepers, a.k.a. @bkeepers.

  2. bkeepers

  3. 1. OVERVIEW 2. HISTORY 3. CHANGES

  4. why is EVERYTHING called HTML5?!? OVERVIEW

  5. HTML5 Hyper Trendy Marketing Lingo v5 @kplawver |ˌeɪtʃ ˌti ˌɛm

    ˈɛl fīv | noun Computing

  6. What is HTML5, really? good question.

  7. whatwg.org/html

  8. w3.org/TR/html5

  9. According to W3C: 1. Defines a single language called HTML5

    2. Defines detailed processing models 3. Improves markup for documents 4. Introduces markup and APIs for emerging idioms

  10. HTML5 is technically not… Web Workers Web Storage Web Messaging

    Web SQL Database Web Audio API WebRTC WebSocket Geolocation Indexed Database File API [other web standard…]

  11. Ian Hickson http://blog.whatwg.org/html-is-the-new-html5 "[HTML5] is now basically being used to

    mean anything Web-standards-related..."

  12. it’s complicated, let me explain…

  13. how did we even get here? HISTORY

  14. HTML 4.0 published December 1997

  15. …working group shut downText HTML 4.0 published December 1997

  16. XML 1.0 February 1998

  17. <cough>lemmings</cough> XML 1.0 February 1998

  18. XHTML draft December 1998

  19. application/xhtml+xml with the “Appendix C” loophole XHTML draft December 1998

  20. XHTML 1.1 May 2001

  21. “Appendix C” loophole removed. XHTML 1.1 May 2001

  22. “Appendix C” loophole removed. 99% estimated error rate on existing

    pages. XHTML 1.1 May 2001

  23. Workshop on Web Applications and Compound Documents June 2004

  24. Competing vision to evolve HTML4 Workshop on Web Applications and

    Compound Documents June 2004

  25. Competing vision to evolve HTML4 voted 14:8 against Workshop on

    Web Applications and Compound Documents June 2004

  26. WHATWG June 2004

  27. Web Hypertext Application Technology Working Group WHATWG June 2004

  28. Web Hypertext Application Technology Working Group WHATWG June 2004 FAILED

    OPPORTUNITY TASK FORCE!

  29. WHATWG

  30. Document how browsers parse HTML WHATWG

  31. Document how browsers parse HTML Web Applications 1.0 WHATWG

  32. W3C — WHATWG October 2006

  33. “Some things are clearer with hindsight of several years. It

    is necessary to evolve HTML incrementally.” W3C — WHATWG October 2006

  34. HTML5 working draft January 2008

  35. end of story? HTML5 working draft January 2008

  36. end of story? Nope. HTML5 working draft January 2008

  37. WHATWG drops "5" January 2012

  38. HTML is a living standard WHATWG drops "5" January 2012

  39. W3C February 2012

  40. advances to "Last call" status W3C February 2012

  41. WHATWG <> W3C July 2012

  42. decided on a “degree of separation” WHATWG <> W3C July

    2012

  43. W3C Current Status

  44. hopes to release stable HTML5 standard by end of 2014

    W3C Current Status

  45. WHATWG Current Status

  46. living standard is never complete and is always being updated

    and improved. WHATWG Current Status

  47. what does it really offer me? CHANGES

  48. Syntax

  49. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> doctype

  50. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> doctype

  51. <!DOCTYPE html> doctype

  52. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> The Root Element

  53. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> The Root Element

  54. <html lang="en"> The Root Element

  55. Content-Type: text/html; charset="utf-8" <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Character Encoding

  56. Content-Type: text/html; charset="utf-8" <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Character Encoding

  57. Content-Type: text/html; charset="utf-8" <meta charset="utf-8"> Character Encoding

  58. Implicit Type <script type="text/javascript" src="/js/site.js"></script> <link type="text/css" href="/css/site.css">

  59. Implicit Type <script type="text/javascript" src="/js/site.js"></script> <link type="text/css" href="/css/site.css">

  60. Implicit Type <script src="/js/site.js"></script> <link href="/css/site.css">

  61. XML Compatible <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title>

    </head> <body> <p>Example paragraph</p> </body> </html>

  62. New Attributes

  63. Semantic Input Types <input type="tel"> <input type="search"> <input type="url"> <input

    type="email"> <input type="datetime"> <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="number"> <input type="range"> <input type="color">

  64. Form Element Attributes <input placeholder="Search…"> <input required> <input autofocus> <fieldset

    disabled>

  65. Data Attributes <input data-href="/api/users" class="users" type="search"> // JS API var

    input = document.querySelector('.users'); var url = input.dataset['href'];

  66. Deprecated <basefont> <big> <center> <font> <strike> <tt> <u> <frame> <frameset>

    <noframes>

  67. New Elements

  68. Structural Elements <section> <nav> <article> <aside> <hgroup> <header> <footer> <figure>

    <figcaption>

  69. Ineractive Elements <details> <summary> <command> <menu> <dialog>

  70. Inline Elements <time> <mark> <meter> <progress> <ruby> <rt> <rp> <bdi>

    <wbr>

  71. Multimedia Elements <video width="320" height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="mp4a.40.2"'>

    <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video> <audio src="/audio.ogg">

  72. Canvas <canvas id="a"></canvas> canvas#a { height: 200px; width: 200px; }

  73. New APIs

  74. Canvas var a = document.getElementById("a"); var context = a.getContext("2d"); context.fillRect(0,

    0, 150, 150);

  75. 2D Context Rectangles c.fillRect(x, y, w, h); c.strokeRect(x, y, w,

    h); Transformations c.scale(x, y); c.rotate(angle); c.translate(x, y); c.transform(a, b, c, d, e, f); c.setTransform(a, b, c, d, e, f); Colors and Styles c.strokeStyle = color; c.fillStyle = color; Text c.fillText(text, x, y, maxWidth); Paths c.moveTo(x, y); c.lineTo(x, y); c.arcTo(x1, y1, x2, y2, radius); c.rect(x, y, w, h); c.fill(); c.stroke(); State c.save(); c.restore();
  76. None

  77. Drag & Drop http://www.w3.org/TR/html5/editing.html#dnd

  78. Offline

  79. History API

  80. …and so much more!

  81. Let’s review, HTML[5] is important because: 1. Defines a single

    language called HTML5 2. Defines detailed processing models 3. Improves markup for documents 4. Introduces markup and APIs for emerging idioms

  82. References Dive Into HTML5 http://diveintohtml5.info/past.html HTML5 differences from HTML4 http://www.w3.org/TR/2011/WD-html5-diff-20110405/

    HTML5 gets the splits http://www.netmagazine.com/news/html5-gets-splits-122102 Wikipedia http://en.wikipedia.org/wiki/HTML5

  83. Questions? @bkeepers bit.ly/nebulous-html5

OSZAR »