Structure

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

<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

<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

Creating an outline

hgroup

The point of hgroup is to mask an h2 element (that acts as a secondary title) from the outline algorithm.

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

<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