HTML5

Existing markup

Structureh1–h6, div
Mediaimg, object
Interactionform, input, textarea, select, button

State the problem

I want to publish documents and applications on the web without dependencies.

Solutions

HyperText Markup Language

eXtensible HyperText Markup Language

Web Hypertext Application Technology Working Group

Timeline

Design principles

HTML Design Principles

…offer guidance for the design of HTML in the areas of compatibility, utility and interoperability.

Error handling

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

—Parsing HTML documents

W3C Documents

Doctype

Character encoding

Simplification

Syntax

Serialisation

Removed

Updated

Redefined

Kinds of content

New elements

exercise

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>

time

…a way to encode modern dates and times in a machine-readable way.

<time datetime="2010-09-02T16:30:00">September 2nd, 4:30pm</time>
<time datetime="2010-09-02">September 2nd</time>

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>

mark

…a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

<h1>Search results for 'unicorn'</h1>
<ol>
<li>Riding the UX <mark>unicorn</mark> across the rainbow of the web.</li>
</ol>

Sectioning content

Sectioning content is content that defines the scope of headings and footers.

Each sectioning content element potentially has a heading and an outline.

Implicit sections

MarkupOutline
 
<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
Lorem ipsum foolor
  Bar
  Lorem ipsum barlor
    Baz
    Lorem ipsum bazlor
  Qux
  Lorem ipsum quxlor
  foobar

Explicit sections

MarkupOutline
 
<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
Lorem ipsum foolor
  Bar
  Lorem ipsum barlor
    Baz
    Lorem ipsum bazlor
  Qux
  Lorem ipsum quxlor
foobar

Masking

For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1–h6 element descendant of the hgroup element.

MarkupOutline
 
<hgroup>
<h1>Foo</h1>
<h2>Bar</h2>
</hgroup>
<p>Lorem ipsum foolor</p>
<h2>Baz</h2>
<p>Lorem ipsum bazlor</p>

Foo
Lorem ipsum foolor
  Baz
  Lorem ipsum bazlor

Sectioning roots

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

MarkupOutline
 
<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

New elements

Document with structural elements and no divs

New and old elements

Document with structural elements and divs

ARIA roles

Document with divs and roles

Styles

article, aside, details,
figure, footer, header,
hgroup, nav, section {
  display: block;
}
header[role="banner"] { }
nav[role="navigation"] { }
footer[role="contentinfo"] { }

Internet Explorer

Distribution

<h1>My blog homepage</h1>
<article>
<h1>Blog post title</h1>
<p>I ate a cheese sandwich.</p>
<footer>
Published <time pubdate datetime="2010-04-22">two days ago</time>.
</footer>
</article>

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>

Widgets

<article>
<h1>Weather in Brighton</h1>
<p>It's sunny.</p>
<footer>
Updated: <time pubdate datetime="2010-06-05T16:05">4:05pm</time>.
</footer>
<style scoped>
h1 { color: red; }
</style>
</article>

Input types

Testing for support

Attributes

Testing for support

Example

Survey

Options

Resources

Blogs

Get involved

WHATWG

W3C