1. HARDCORE HTML

2. A SHORT HISTORY OF Hardcore
HTML
HTML

3. Hypertext
Invented in the 1940’s A SHORT
Metadata for text HISTORY
OF HTML
Brought to the Computer
HyperCard for Mac in 1987
The Web
Tim Berners-Lee at CERN
Bases HTML on SGML
Hypermedia
Marc Andreessen creates
Mosaic, includes img

5. ¶ This is my paragraph. There are many like it, but this one is
mine.
¶ My paragraph is my best friend. It is my life. I must master it
as I must master my life.
¶ My paragraph, without me, is useless. Without my paragraph,
I am useless. I must word my paragraph true. I must write
straighter than my editor who is trying to kill me. I must write
before he corrects me. I will...

6. Hypertext
Invented in the 1940’s A SHORT
Metadata for text HISTORY
OF HTML
Brought to the Computer
HyperCard for Mac in 1987
The Web
Tim Berners-Lee at CERN
Bases HTML on SGML
Hypermedia
Marc Andreessen creates
Mosaic, includes img

7. Hypertext
Invented in the 1940’s A SHORT
Metadata for text HISTORY
OF HTML
Brought to the Computer
HyperCard for Mac in 1987
The Web
Tim Berners-Lee at CERN
Bases HTML on SGML
Hypermedia
Marc Andreessen creates
Mosaic, includes img

8. Becoming a Standard
HTML2 was introduced in A SHORT
Geneva, May 1994 HISTORY
OF HTML
HTML2 spec, July 1994
IETF setup, Sept 1994
W3C launched in Dec 1994
HTML3 was a hot mess
Introduces tags like FONT FACE
and BGCOLOR
HTML no longer semantic

9. WAR!
IE fucks everyone, Aug 1995 A SHORT
 Embeds ActiveX HISTORY
OF HTML
NS invents craps, Sep 1995
 Adds frames
Browser designers start
driving HTML standards
HTML4 was published
But no one fully supported it

10. Years wasted on XML
XHTML invented in 1999
A SHORT
 No one used it HISTORY
XHTML2 created in 2002 OF HTML
 No one implemented it
HTML5
TBL basically forced W3C to
draft HTML5 in 2006
W3C is utterly neutered
 Largely a secretary for what the
browser implementers want
 Not necessarily a bad thing
 Keeps implementers in sync

11. Changes in
the Spec
HTML5 from
HTML4

12. NEW SEMANTIC ELEMENTS
 <article>  D e fi n es a n a r t i c l e
 <aside>  Co n te nt a s i de fro m pa g e c o n te n t
 <bdi>  Is o la tes di re c t i o nal tex t
 < c o mmand >  Co m man d but to n t h a t a us e r c a n i nvo ke
 < d et a i l s >  D e fi n es a ddi t i o nal, to g g l eable det a i l s
 < s u m mar y >  A v i s ible h e a di n g fo r < det a i l s > e l e m ent
 < f i gu re >  Se l f - c o nt aine d c o n te n t ( l i ke di a g ra ms)
 < f i gc a pti on >  A c a pt i o n fo r a < fi g ure > e l e men t
 < fo o te r>  A fo ote r fo r a do c um e n t o r s e c t i on
 <he a d e r >  D e fi n es a h e a de r fo r a do c um e n t o r s e cti o n
 < h gro u p >  G ro ups a s et o f < h 1 > to < h 6 > e l e m ent s
 < m a rk >  D e fi n es m a rke d/ highlighte d tex t
 < m ete r >  A s c a l a r m e a s urement w i t h i n a ra n g e
 < n av >  D e fi n es n av i gat ion l i n k s
 < p ro gre s s >  Th e pro g re s s o f a t a s k
 < ru by >  Ruby a n n ot a t io n ( E a s t As i a n t y po g ra phy )
 <rt>  An ex pl a n a t ion/pro nun ciat ion o f c h a ra cte r s
 <rp>  Wh a t to s h ow w h e n ruby a n n ot a t ions a re un s uppo r te d
 < s e c t i on>  A s e c t i o n i n a do c um e n t
 <time>  A da te / t i m e
 < wb r >  A p o s s i b l e l i n e - bre ak

13. OTHER NEW ELEMENTS
 < a u d i o>  D e fi n es s o un d c o n te n t
 <video>  A v i de o o r m ov i e
 <so u rc e >  D e fi n es m ul t i ple m e di a re s o urc e s
 <embed>  A c o n t a i n er fo r a n ex te rn a l a pp ( pl ug i n)
 < t r a c k>  D e fi n es t ra c k s fo r < v i de o > a n d < a udi o >
 < c a nvas >  Us e d to draw g ra ph i c s o n t h e fl y, v i a s c ri pt i ng
 < d a t al is t >  Spe c i fi es a l i s t o f o pt i o n s fo r i n put s
 < keyge n >  A key - pa i r g e n e ra tor fi e l d ( fo r fo rm s )
 < o u t put>  Co n t a ins re s ul t o f a c a l c ul a t ion

14. DEAD ELEMENTS (FROM HTML 4)
 <acronym>  <font>
 <applet>  <frame>
 <basefont>  <frameset>
 <big>  <noframes>
 <center>  <strike>
 <dir>  <tt>

15. THE BASIC BASICS Basically

16. <!DOCTYPE html>
<html lang="en-US">
THE BASIC
<head> BASICS
<meta charset="utf-8"> Simple Page
L ayo ut
<title>Duck Page</title>
</head>
<body>
Text about Ducks
</body>
</html>

17. USE MODERNIZR
 http://modernizr.com/downloads/modernizr-2.5.3.js

18. USE MODERNIZR
<html>
<head>
<meta charset="utf-8">
<script
src="http://modernizr.com/downloads/modernizr-2.5.3.js">
</script>
</head>

19. USE MODERNIZR
<html>
<head>
<meta charset="utf-8">
<script
language="Javascript"
src="http://modernizr.com/downloads/modernizr-2.5.3.js">
</script>
</head>

20. <div>
I'm a DIV
</div> THE BASIC
BASICS
The simplest
tags

21. <div>
I'm a DIV
</div> THE BASIC
BASICS
<div> The simplest
tags
I'm a DIV (new line)
</div>

22. <span>
I'm a SPAN
</span> THE BASIC
BASICS
<span> The simplest
tags
I'm a SPAN (same line)
</span>

23. <p
id=main
class=important THE BASIC
BASICS
title="Cool Information” The simplest
style="color:red;" tags
dir=ltr
lang=en
data-attributes="yes"
>
I like attributes
</p>

24. Articles
LAYOUTS and
Sections

25. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>

26. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>

27. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>

28. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>

29. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>

30. <article>
<header>
<hgroup>
<h1>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time datetime="2012-06-13">yesterday</time></p>
</footer>
</article>

31. <article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<hgroup>
<h1 itemprop=headline>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p itemprop=articleBody>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time itemprop=datePublished datetime="2012-06-
13">yesterday</time></p>
</footer>
</article>

32. <article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<hgroup>
<h1 itemprop=headline>My Favorite Things</h1>
<h2>Books</h2>
</hgroup>
</header>
<p itemprop=articleBody>
This is my main article.
<aside>
By the way... this is an aside.
</aside>
</p>
<footer>
<p>Published <time itemprop=datePublished datetime="2012-06-
13">yesterday</time></p>
</footer>
</article>

33. <section>
<header>
<h1>HTML</h1>
</header>
<p>
HTML is so much fun.
</p>
<footer>
Learn <a href="http://developers.whatwg.org/">more</a> about HTML.
</footer>
</section>

34. <section>
<header>
<h1>HTML</h1>
</header>
<p>
HTML is so much fun.
</p>
<footer>
Learn <a href="http://developers.whatwg.org/">more</a> about HTML.
</footer>
</section>
<section>
<header>
<h1>JavaScript</h1>
</header>
<p>
JavaScript is a good language.
</p>
<footer>
Learn <a href=”http://w3schools.com/js/">JS</a>.
</footer>
</section>

35. <article>
<header>
<h1>Computer Languages</h1>
</header>
<section>
<h1>HTML</h1>
<p>HTML is so much fun.</p>
</section>
<section>
<h1>JavaScript</h1>
<p>JavaScript is a good language.</p>
</section>
</article>

36. Elements
GROUPING that group
things

37. <p>
Thisisareallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyre
allyreally<wbr>reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreall
yreallyreallyreallyreallylongword
</p>

38. <blockquote lang="en-GB">
Look around and you will find, no-one's really <mark>colour</mark> blind.
</blockquote>

39. <figure>
<p>This is my paragraph. There are many like it but this one is mine....</p>
<figcaption>Paragraph’s Creed</figcaption>
</figure>

40. <details>
<summary>Automated Status: Operational</summary>
<p>Velocity: 12m/s</p>
<p>Direction: North</p>
</details>

41. <dl>
<dt lang="en-US"> <dfn>color</dfn></dt>
<dt lang="en-GB"> <dfn>colour</dfn></dt>
<dd>A visual sensation of different light wavelengths</dd>
<dd>Pretty eye inputs</dd>
</dl>

42. <pre><code data-language=ruby>
x="hello world!”
puts x
</code></pre>
<p>
The variable <var>x</var> was set a string. Press <kbd>enter</kbd> to
make it run. It will output <samp>hello world!</samp>
</p>

43. NAVIGATION

44. <nav>
<ol>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ol>
</nav>

45. <menu type=toolbar label="File">
<button type=button onclick="file_new()">New...</button>
<button type=button onclick="file_open()">Open...</button>
<button type=button onclick="file_save()">Save</button>
<command type=command label="Save" onclick="file_save()">Save</command>
</menu>

46. TEXT-LEVEL SEMANTICS

47. <!-- pre HTML5 -->
<p>
<cite title="Eats, Shoots, and Leaves: The Zero Tolerance Approach to
Punctuation">Lynne Truss</cite> said <q>Freeze or get stabbed, mate. It's your
choice.</q>
</p>
<!-- HTML5 -->
<p>
<cite>Eats, Shoots, and Leaves: The Zero Tolerance Approach to Punctuation</cite>
by <b>Lynne Truss</b> says <q>Freeze or get stabbed, mate. It's your choice.</q>
</p>

48. The cite element represents the title of a work … A person’s
name is not the title of a work … and the element must
therefore not be used to mark up people’s names.
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-
semantics.html#the-cite-element

49. The cite element represents the title of a work … A person’s
name is not the title of a work … and the element must
therefore not be used to mark up people’s names.
WRONG. BAD. STUPID!
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-
semantics.html#the-cite-element

50. <p>
The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
device that allows off-world teams to open the iris.
</p>
<p>
Don't forget the <a href="#gdo"><abbr title="Garage Door
Opener">GDO</abbr></a>.
</p>

51. <p>
There are <data value="8">bridges</data> of them.
There will be <data value="9">nine</data> on <time datetime"2012-11-12">
Nov, 12</time>.
</p>

52. <p>
My favorite color is
<del cite="http://en.wikipedia.org/wiki/Blue">blue</del>
<ins cite="http://en.wikipedia.org/wiki/Red">red</ins>!
</p>

53. <p>
My favorite color is
<del cite="http://en.wikipedia.org/wiki/Blue" datetime="2012-06-0123:59:59Z"
>blue</del>
<ins cite="http://en.wikipedia.org/wiki/Red">red</ins>!
</p>

54. Useful bits
and things
UTILITIES Eric
doesn’t
like

55. <meter min=0 max=20 value=12 optimum=15 title="centimeters">
12cm
</meter>

56. <progress min=0 max=100 value=56 title="download">
56%
</progress>

57. <div draggable="true">
Drag Me!
</div>
<div dropzone="move">
Into me
</div>

58. <p style="display:inline" dir=ltr>
<style scoped=true>
p { color: red; }
</style>
I’m red!
</p>
<p>
I’m not red.
</p>

59. FORMS

60. <form action="/" method=post>
<fieldset class="fields">
<legend>Info</legend>
<ol>
<li data-required="true">
<label for=ssn>SSN<abbr title=”required”>*</abbr></label>
<input id=ssn name=ssn placeholder="000-00-0000">
</li>
</ol>
</fieldset>
<fieldset class=”buttons">
<legend>Buttons</legend>
<ol>
<li><input type=submit value="Cancel" disabled></li>
<li><input type=submit value="Submit &#x25b6;"></li>
</ol>
</fieldset>
</form>

61. <select name="browsers">
<optgroup label="Good Browsers">
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</optgroup>
<optgroup label="Not Good Browsers">
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
</optgroup>
</select>

62. <input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

63. <input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<script
src="https://raw.github.com/miketaylr/jquery.datalist.js/master/jquery.datalist.js">
</script>

64. <input type=text name="name" autofocus="true" tabindex="1">
<input type=range name="range" main="0" max="25”>
<input type=date name="date" placeholder="2012-12-21”>
<input type=search name="search”>
<input type=email name="required" required="true" pattern=".*@.*"
placeholder="email@address.com">
<input type=text name="read" readonly="true" value="You Can Only Read Me">
<input type=tel name="tel" placeholder="(503) 555-1212" required="true"
pattern=”^(.*d.*){10}$" >
<input type=color name="color">
<input x-webkit-speech>
<keygen name="key”>

66. <li>
<input name=arg1 type=number step=any value="0"> +
<input name=arg2 type=number step=any value="0"> =
<output data-function="add" for="arg1 arg2" >0</output>
</li>

67. <table class="table table-striped">
<caption>
<strong>Actors and their Characters</strong>
<details>
This is a very short list, and is inspired by nothing more than who happened to be in my head at that
moment.
</details>
</caption>
<colgroup><col class="actors"><col class="characters"></colgroup>
<thead>
<tr>
<th>Name</th>
<th>Character</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lou Ferrigno</td>
<td>The Hulk</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3 Actors</td>
<td>4 Characters</td>
</tr>
</tfoot>
</table>

68. <table class="table table-striped">
<caption>
<strong>Actors and their Characters</strong>
<details>
This is a very short list, and is inspired by nothing more than who happened to be in my head at that
moment.
</details>
</caption>
<colgroup><col class="actors"><col class="characters"></colgroup>
<thead>
<tr>
<th>Name</th>
<th>Character</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lou Ferrigno</td>
<td>The Hulk</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3 Actors</td>
<td>4 Characters</td>
</tr>
</tfoot>
</table>

69. MEDIA

70. <video>
<source src="http://html5demos.com/assets/dizzy.mp4">
</video>
<audio controls>
<source src="demo-audio.ogg”>
<source src="demo-audio.mp3”>
</audio>