An Introduction to HTML5
HyperText Markup Language
- October 1991: HTML Tags — Tim Berners-Lee
- November 1995: HTML 2.0 — IETF
- January 1997: HTML 3.2 — W3C
- December 1997: HTML 4.0 — Strict, Transitional, Frameset
- December 1999: HTML 4.01
eXtensible HyperText Markup Language
- January 2000: XHTML 1.0 — Strict, Transitional, Frameset
- May 2001: XHTML 1.1 — mime-type:application/xml
- Never: XHTML 2.0
Web Hypertext Application Technology Working Group
- June 2004: Opera and Mozilla set up the mailing list
- HTML5 — Web Applications 1.0 & Web Forms 2.0
- October 2006: Reinventing HTML — Tim Berners-Lee
- May 2007: W3C HTML Working Group
- January 2008: HTML 5
Timeline
- ?: Last Call Working Draft
- 2012: Candidate Recommendation
- 2022: Proposed Recommendation
Design principles
- …users over authors over implementors over specifiers over theoretical purity
- Pave the cowpaths

Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0:

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

HTML 5:
```
<!DOCTYPE html>
```

Character encoding

HTML 4.01:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

XHTML 1.0:

<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML 5:
```
<meta charset="utf-8">
```

Serialisation
- HTML5
  
  must be served using the text/html MIME type.
- XHTML5
  
  must be served using an XML MIME type, such as application/xhtml+xml or application/xml.

Syntax

<li class="foo">Hello world</li>
<img src="foo" alt="bar" />

<li class="foo">Hello world
<img src="foo" alt="bar">

<LI CLASS="foo">Hello world</LI>
<IMG SRC="foo" ALT="bar">

<li class=foo>Hello world</li>
<img src=foo alt=bar>

Error handling

This specification defines the parsing rules for HTML documents, whether they are syntactically correct or not.

—Parsing HTML documents
Removed
- Presentational elements: font, big, center, etc.
- Presentational attributes: border, bgcolor, etc.
- frame, frameset, noframes
- acronym
- axis, summary(?)
Changed
- a …may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within.
- b …a span of text to be stylistically offset from the normal prose without conveying any extra importance.
- i …a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
- hr …a paragraph-level thematic break.
- small …small print (for side comments and legal print).
Extensibility

No matter how many elements we bolt on, we will always think of more semantic goodness to add to HTML. And so, having added as many new elements as we like, we still won’t have solved the problem. We don’t need to add specific terms to the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required.

—John Allsopp
Extensibility

…social co-ordination brings the value in shared data and protocols, not infinite extensibility, which tends to encourage duplication of effort.

…making the points of extensibility into scarce, community-managed resources … is a good thing. It has positive political and social effects; it forces (or at least inclines) people to co-operate, whether they’re a multi-billion dollar behemoth, or a sole engineer who wants his fifteen minutes of fame.
—Mark Nottingham
New elements
- mark
  …a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
- time
  This element is intended as a way to encode modern dates and times in a machine-readable way so that user agents can offer to add them to the user's calendar.
  <time datetime="2009-09-02T09:30:00">September 2nd, 9:30am</time>
New elements
- nav, article, section, aside
- header, hgroup, footer
- details, figure

`header`

…a group of introductory or navigational aids.

<header>
<h1>My awesome site</h1>
<p>Welcome to my site. It has lots of cool stuff:</p>
<ul>
<li>My lovely horse</li>
<li>My interesting rock collection</li>
<li>and more…</li>
</ul>
</header>

aside

…represents a section of a page that consists of content that is tangentially related to the content around it, and which could be considered separate from that content.
```
<aside>
<h1>Brighton</h1>
<p>Brighton is a town on the south coast of England.</p>
<p>It is built on the site of Brighthelmston.</p>
</aside>
```
hgroup

…used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
```
<hgroup>
<h1>DOM Scripting</h1>
<h2>Web Design with JavaScript and The Document Object Model</h2>
</hgroup>
```
footer

…typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
```
<footer>
<p>Copyright 2009 <address>jeremy@adactio.com</address></p>
</footer>
```
figure

…some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
```
<figure>
<img src="horse.jpg" alt="a horse in a field">
<figcaption>My lovely horse</figcaption>
</figure>
```

`nav`

…a section of a page that links to other pages or to parts within the page: a section with navigation links.

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>

`section`

…a thematic grouping of content, typically with a heading.

<section>
<header>
<h1>DOM Scripting</h1>
</header>
<h2>JavaScript</h2>
<p>JavaScript is a programming language.</p>
<h2>The DOM</h2>
<p>The DOM is an API.</p>
<footer>Written by Jeremy Keith</footer>
</section>

`article`

…a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication.

<article>
<header>
<h1>DOM Scripting</h1>
</header>
<h2>JavaScript</h2>
<p>JavaScript is a programming language.</p>
<h2>The DOM</h2>
<p>The DOM is an API.</p>
<footer>Written by Jeremy Keith</footer>
</article>

`details`

…a disclosure widget from which the user can obtain additional information or controls.

<details>
<summary>Log in</summary>
<form method="post" action="login">
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</form>
</details>

Sectioning content

Sectioning content is content that defines the scope of headings and footers.
- article
- aside
- nav
- section
Each sectioning content element potentially has a heading and an outline.

Implicit sections

Markup Outline

Markup	Outline
`<h1>Foo</h1> <p>Lorem ipsum foolor</p> <h2>Bar</h2> <p>Lorem ipsum barlor</p> <h3>Baz</h3> <p>Lorem ipsum bazlor</p> <h2>Qux</h2> <p>Lorem ipsum quxlor</p> <small>foobar</small>`	Foo Bar Baz Qux foobar

<h1>Foo</h1>
<p>Lorem ipsum foolor</p>
<h2>Bar</h2>
<p>Lorem ipsum barlor</p>
<h3>Baz</h3>
<p>Lorem ipsum bazlor</p>
<h2>Qux</h2>
<p>Lorem ipsum quxlor</p>
<small>foobar</small>

Foo
  Bar
    Baz
  Qux
  foobar

Explicit sections

Markup Outline

Markup	Outline
`<h1>Foo</h1> <p>Lorem ipsum foolor</p> <section> <h1>Bar</h1> <p>Lorem ipsum barlor</p> <h2>Baz</h2> <p>Lorem ipsum bazlor</p> <h1>Qux</h1> <p>Lorem ipsum quxlor</p> </section> <small>foobar</small>`	Foo Bar Baz Qux foobar

<h1>Foo</h1>
<p>Lorem ipsum foolor</p>
<section>
<h1>Bar</h1>
<p>Lorem ipsum barlor</p>
<h2>Baz</h2>
<p>Lorem ipsum bazlor</p>
<h1>Qux</h1>
<p>Lorem ipsum quxlor</p>
</section>
<small>foobar</small>

Foo
  Bar
    Baz
  Qux
foobar

exercise

Creating an outline

hgroup

The point of hgroup is to mask all but the highest-ranking heading element within from the outline algorithm.
Sectioning roots
- blockquote
- body
- figure
- td
These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

Sectioning roots

Markup Outline

Markup	Outline
`<h1>Foo</h1> <p>Lorem ipsum foolor</p> <h2>Bar</h2> <p>Lorem ipsum barlor</p> <blockquote> <h3>Baz</h3> <p>Lorem ipsum bazlor</p> </blockquote> <h2>Qux</h2> <p>Lorem ipsum quxlor</p> <small>foobar</small>`	Foo Bar Qux

<h1>Foo</h1>
<p>Lorem ipsum foolor</p>
<h2>Bar</h2>
<p>Lorem ipsum barlor</p>
<blockquote>
<h3>Baz</h3>
<p>Lorem ipsum bazlor</p>
</blockquote>
<h2>Qux</h2>
<p>Lorem ipsum quxlor</p>
<small>foobar</small>

Foo
  Bar
  Qux

Styles

<style>
h1 { color: green; }
</style>
<h1>What colour am I?</h1>
<section>
<style>
h1 { color: red; }
</style>
<h1>What colour am I?</h1>
</section>

Scoped styles

<style>
h1 { color: green; }
</style>
<h1>What colour am I?</h1>
<section>
<style scoped>
h1 { color: red; }
</style>
<h1>What colour am I?</h1>
</section>

Global styles

article, aside, details,
figure, footer, header,
hgroup, nav, section {
	display: block;
}

Internet Explorer

document.createElement('article');
document.createElement('aside');
document.createElement('details');
…

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

New elements
New and old elements
ARIA roles
Classes
Options
- Doctype + ARIA roles
- Doctype + class names + ARIA roles
- Doctype + new elements + ARIA roles
Resources
- validator.nu
- gsnedders.html5.org/outliner
- html5doctor.com
- diveintohtml5.org
Get involved

WHATWG
- Spec: whatwg.org/html5
- Mailing lists: whatwg.org/mailing-list
- IRC channel: irc://irc.freenode.org/whatwg

An Introduction to HTML5

by Jeremy Keith

An Introduction to HTML5

HyperText Markup Language

eXtensible HyperText Markup Language

Web Hypertext Application Technology Working Group

Timeline

Design principles

Doctype

Character encoding

Serialisation

HTML5

XHTML5

Syntax

Error handling

Removed

Changed

Extensibility

Extensibility

New elements

New elements

header

aside

hgroup

footer

figure

nav

section

article

details

Sectioning content

Implicit sections

Explicit sections

Creating an outline

hgroup

Sectioning roots

Sectioning roots

Styles

Scoped styles

Global styles

Internet Explorer

New elements

New and old elements

ARIA roles

Classes

Options

Resources

Get involved

WHATWG

`header`

`aside`

`hgroup`

`footer`

`figure`

`nav`

`section`

`article`

`details`

`hgroup`