New semantic elements in HTML

The following elements have been introduced for better structure:

<section> represents a generic document or application section. It can be used together with the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>elements to indicate the document structure.
<article> represents an independent piece of content of a document, such as a blog entry or newspaper article.
<aside> represents a piece of content that is only slightly related to the rest of the page.
<hgroup> represents the header of a section.
<header> represents a group of introductory or navigational aids.
<footer> represents a footer for a section and can contain information about the author, copyright information, etc.
<nav> represents a section of the document intended for navigation.
<figure> represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
<figcaption> can be used as caption (it is optional).
<main> represents the main content section of the body of a document or application

These will be explored in more detail below. Then there are several other new elements.

<embed> is used for plugin content.
Not relevant to a particular success criterion

<mark> represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
Relevant to Success Criterion 1.3.1

<progress> represents the progress of some automated task – such as saving or downloading a file.
Relevant to Success Criterion 3.3.5/

<meter> represents a measurement, such as disk usage.
Relevant to Success Criterion 3.3.2

<time> represents a date and/or time.
Relevant to Success Criterion 3.3.2

<data> which allows content to be annotated with a machine-readable value.
Relevant to Success Criterion 3.3.2

<ruby>, <rt>, and <rp> allow for marking up ruby annotations.
Relevant to Success Criterion 1.3.1

<bdi> represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.
Relevant to Success Criterion 1.3.2

<wbr> represents a line break opportunity.
Relevant to Success Criterion 1.3.1

<canvas> is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
Relevant to Success Criterion 1.3.1

<details> represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.
Relevant to Success Criterion 3.3.2

Multimedia content

<video> and <audio> for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. Source elements are used together with these elements if there are multiple streams available of different types.
Relevant to Guideline 1.2

<track> provides text tracks for the video element. A range of options can be defined using the “kind” attribute, including “subtitles”, “captions”, “descriptions” and “chapters”.

<video controls src="video.webm">
  <track kind="subtitles" srclang="de" src="sub_de.vtt">
  <track kind="captions" srclang="en" src="cc_en.vtt">
  <track kind="descriptions" srclang="en" src="des_en.vtt">
</video>

The “subtitles” value provides a transcription or translation of the dialogue, suitable for when the sound is available but not understood.

The “captions” value provides a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when the soundtrack is unavailable.

The “descriptions” value provides textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is unavailable.

The “chapters” value provides chapter titles, intended to be used for navigating the media resource.
Relevant to Guideline 1.2

The new structural elements

Introduction

HTML5 has a range of new structural elements that allow us to create richer, more meaningful and more flexible web documents. These new semantics have been carefully designed to extend the current capabilities of HTML, while always enabling users of older browsers to access the content.

In HTML4.01 and XHTML1.0 it is not possible to define specific aspects of a web document such as the header, navigation or footer. Using these markup languages, the only way to define the hierarchy of a web document was via the use of heading levels — <h1>–<h6>.

HTML5 provides new semantic elements that allow authors to specifically define aspects of web documents, including <header>, <footer>, <section>, <article>, <figure> and <figcaption>.

More importantly, authors can use these elements in an infinite variety of ways, allowing extensive flexibility. For example, the <header> element can be used as a header to the overall web document as well as being a header within any <section> element or <article> elements within the document.

`<header>`

Relevant to Success Criteria 2.4.1 and 2.4.10

A <header> element typically contains the site, article or section heading, but can also contain other content, such as a search form or relevant logos.

Example with <h1> only:

<header>
  <h1>Site name</h1>
</header>

Example with headings and other content only:

<header>
  <h1>Site name</h1>
  <h2>Site slogan</h2>
  <p>Supplementary information</p>
</header>

Example with <h1>, <nav> and <form>:

<header>
  <h1>Site name</h1>
  <nav>…</nav>
  <form>…</form>
</header>

A <header> element can be used multiple times within a single document.

<header>…</header>
<article>
  <header>…</header>
</article>

<hgroup>

Relevant to Success Criterion 1.3.1, 2.4.6 and 2.4.10

An <hgroup> element is used to group one or more <h1> to <h6> headings.

<hgroup>
  <h1>Site name</h1>
  <h2>Bi-line</h2>
</hgroup>

The <hgroup> is generally used inside the <header> but it can be used on its own.

<header>
  <hgroup>
    <h1>Site name</h1>
    <h2>Bi-line</h2>
  </hgroup>
<header>

The <hgroup> can only contain a group of <h1> to <h6> element(s). It should be used for subtitles, alternative titles, and tag lines.

The <hgroup> can be used multiple times within a single document.

<header>
  <hgroup>
    <h1>Site name</h1>
    <h2>Bi-line</h2>
  </hgroup>
<header>
<article>
  <hgroup>
    <h1>Site name</h1>
    <h2>Bi-line</h2>
  </hgroup>
</article>

`<nav>`

Relevant to Success Criteria 2.4.1 and 3.2.3

The <nav> element represents 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</a></li>
    <li><a href="#">join</a></li>
    <li><a href="#">campaigns</a></li>
    <li><a href="#">contact us</a></li>
  </ul>
</nav>

The <nav> element can contain a wide range of elements including headings, lists and other content.

<nav>
  <h3>Site navigation</h3>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">join</a></li>
    <li><a href="#">members</a></li>
    <li><a href="#">services</a></li>
  </ul>
  <h3>Blog roll</h3>
  <ul>
    <li><a href="#">John</a></li>
    <li><a href="#">Sophia</a></li>
    <li><a href="#">Jin</a></li>
  </ul>
</nav>

Not all groups of links on a page need to be in a <nav> element only sections that consist of major navigation blocks are appropriate for the <nav> element.

`<section>`

Relevant to Success Criteria 1.3.1 and 2.4.1

The <section> element represents a generic document or application section.

<section>
  <h1>Apple</h1>
  <p>The apple is the fruit…</p>
</section>

Ideally, the <section> should be used if there is a natural heading associated with it.

<section>
  <h1>Apple</h1>
  <p>The apple is the fruit…</p>
</section>
<section>
  <h2>Pears</h2>
  <p>The pear is also a fruit…</p>
</section>

The <section> element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

`<article>`

Relevant to Success Criteria 1.3.1 and 2.4.1

The <article> element represents a component of a page that could be reused or distributable (i.e. via syndication). This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

<article>
  <h1>Apple</h1>
  <p>The apple is the fruit…</p>
</article>

The article can also be used in conjunction with other elements such as the <header> and <footer> elements.

<article>
  <header>
    <h1>Apple</h1>
    <p>Published: 2009-10-09</p>
  </header>
  <p>The apple is a fruit…</p>
  <footer>
    <small>Creative Commons</small>
  </footer>
</article>

The <article> elements can be used multiple times within a single document.

<article>
  <header>
    <h1>Apple</h1>
    <p>Published: 2009-10-09</p>
  </header>
  <p>The apple is a fruit…</p>
  <footer>Footer information</footer>
  <section>
      <h2>Comments</h2>
      <article>
      <header>
        <h3>Author: Apple Lover</h3>
      </header>
      <p>I love apples</p>
    </article>
  </section>
</article>

`<aside>`

Relevant to Success Criterion 2.4.1

The <aside> represents a section of a page consisting of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

<aside>
  <h2>Blogroll</h2>
  <ul>
    <li><a href="#">My Friend</a></li>
    <li><a href="#">Another</a></li>
    <li><a href="#">Best Friend</a></li>
    <li><a href="#">Friend</a></li>
  </ul>
</aside>

Unlike many of the other new semantic elements, there is normally only one <aside> per document.

`<footer>`

Relevant to Success Criterion 2.4.1

The <footer> element represents a footer for its nearest ancestor and contains info such as author, copyright, related info.

The <footer> element can be used as a footer for the overall document:

<footer>
  <ul>
    <li>copyright info</li>
    <li>sitemap link</li>
  </ul>
</footer>

The <footer> element also be used as a footer for a <section>

<section>
  Section content appears here
  <footer>
    Footer info for section
  </footer>
</section>

The <footer> element also be used as a footer for an <article>

<article>
  Article content appears here
  <footer>
    Footer info for article
  </footer>
</article>

The <footer> element can be used multiple times within a single document.

<header><header>
<article>
  <header></header>
  <p>Lorem Ipsum set amet…</p>
  <footer>
    Footer info for article
  </footer>
</article>
<footer>
  Footer info for site
</footer>

`<figure>`

Relevant to Success Criterion 1.3.1

The <figure> element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document.

The content should be able to be moved away from the main flow of the document without affecting the document’s meaning.

<figure>
  <img src="a.jpg" alt="Little Pied Bat">
</figure>

The <figure> element is intended to be used in conjunction with the <figcaption> element. The <figcaption> is optional.

<figure>
  <img src="a.jpg" alt="Little Pied Bat">
  <figcaption>
    Little Pied Bat, picatus Chalinolobus
  </figcaption>
</figure>

The <figure> element can be used to mark up diagrams, illustrations, photos, and code examples (among other things).

The <figure> element can contain more than one photo, illustration, diagram etc.

<figure>
  <img src="a.jpg" alt="Little Pied Bat">
  <img src="b.jpg" alt="Eastern Cave Bat">
  <img src="c.jpg" alt="Inland Cave Bat">
  <figcaption>
    From left to right: 
    Little Pied Bat, picatus Chalinolobus
    Eastern Cave Bat, trought Vespadelus
    Inland Cave Bat,finlaysoni Vespadelus
  </figcaption>
</figure>

The <figure> element can be used multiple times within a single document.

`<figcaption>`

Relevant to Success Criterion 1.3.1

The <figcaption> element represents a caption or legend for a figure.

<figure>
  <img src="a.jpg" alt="Little Pied Bat">
  <figcaption>
    Little Pied Bat, picatus Chalinolobus
  </figcaption>
</figure>

The <figcaption> element is optional and can be placed before or after the content within the <figure>.

<figure>
  <figcaption>
    Little Pied Bat, picatus Chalinolobus
  </figcaption>
  <img src="a.jpg" alt="Little Pied Bat">
</figure>

While the <figure> element can contain multiple images, diagrams etc, there can be only one <figcaption> element within a <figure> element.

<figure>
  <img src="a.jpg" alt="Little Pied Bat">
  <img src="b.jpg" alt="Eastern Cave Bat">
  <img src="c.jpg" alt="Inland Cave Bat">
  <figcaption>
    From left to right: Little Pied Bat, 
    Eastern Cave Bat, Inland Cave Bat
  </figcaption>
</figure>

`<main>`

Relevant to Success Criterion 1.3.1

The <main> element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

<main role="main">
  … 
</main>

Authors must not include more than one main element in a document. Authors must not include the main element as a child of an article, aside, footer, header or nav element.

In the following example, there are two sections about fruit, and the main topic content is identified by the use of the main element.

<main role="main">
  <h1>Fruit</h1>
  <section>
    <h2>Apples</h2>
    …
  </section>
  <section>
    <h2>Pears</h2>
    …
  </section>
</main>

Using the new semantic elements

These new HTML5 semantic elements can be used in a wide variety of ways. They are deliberately designed to be as flexible as possible.

However, there can be some confusion about how to use these new elements, as well as how these elements are supported across browsers.

When to use `<div>`, `<section>` and `<article>`

Question. Do you need a generic container?: <div> may be ideal
Question: Does the contents of the container include a heading and look like a section of content?: Use a <section>
Question 3: Does the content have the potential to be repurposed?: Use an <article>

Support

By default, most browsers assume that unknown elements are display: inline. However, these new structural elements should be set to display: block.

So, we can write a simple rule that will solve this problem for almost all browsers:

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

Unfortunately, these new semantic elements are not recognised by Internet Explorer 6–8. You can solve this using one of two methods.

Option 1: Use nested `<div>` elements

You can add additional <div> elements inside the HTML5 elements and style these <div> elements only.

<nav>
  <div class="nav">
    …
  </div>
</nav>

Option 2: Use a small amount of JavaScript

Or, you could use JavaScript like the HTML5shim, which also solves a known IE print issue with HTML5 elements. Ideally, this JS link should be wrapped inside a conditional comment, so other browsers do not have to download it.

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

New semantic elements in HTML

Multimedia content

The new structural elements

Introduction

<header>

<hgroup>

<nav>

<section>

<article>

<aside>

<footer>

<figure>

<figcaption>

<main>

Using the new semantic elements

When to use <div>, <section> and <article>

Support

Option 1: Use nested <div> elements

Option 2: Use a small amount of JavaScript

`<header>`

`<nav>`

`<section>`

`<article>`

`<aside>`

`<footer>`

`<figure>`

`<figcaption>`

`<main>`

When to use `<div>`, `<section>` and `<article>`

Option 1: Use nested `<div>` elements