The main element

←Back to listing

Back in I wrote about the proposed HTML5 main element. This new element was recently added to the HTML5 specification.

Actually main has so far only been added to the W3C HTML5 specifcation, the WHATWG have yet to do so.

It has also been added to the next version of the HTML5 specification: HTML 5.1.

Background

This element is the brainchild of Steve Faulkner who has worked tirelessly in putting together an excellent extension specification which now forms the definition of the main element within the W3C HTML5 specification. Steve also produced a thorough use case rationale for the inclusion of the main element.

Definition

The W3C specification defines the main element as being used to represent the main content section of the body of a document or application.

It also goes on to define what is meant by a “main content section”, which consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Facts

  • There should only be one main element per web document.
  • The main element is not sectioning content and therefore doesn’t affect the document outline.
  • It is recommended to use the WAI-ARIA role="main" role on the main element until such time as user agents implement the required role mapping.

Example usage

As has already been mentioned, the purpose of the main element is to contain the main content or topic of a web document.

If, for example, the web document contains a blog entry, then the entire content of that blog entry should be wrapped within a main element.

<main role="main">
   <h1>The Coypu</h1>
   <section>
      <h2>Introduction</h2>
      <p>The ‘Coypu’ (or ‘Swamp Beaver’ as it is elsewhere known) is a rodent, related to the porcupine. It is an aquatic animal, making burrows in the banks of streams and feeding on plants in or near to the water.</p>
   </section>
   <section>
      <h2>Location</h2>
      <p>The coypu's original home is in South America but due to it's beautiful long soft coat, the coypu has been farmed in many parts of the world including Britain, where in particular, it had escaped and established itself 
successfully in the countryside of Norfolk and North Suffolk to become a major pest by damaging riverbanks and crops.</p>
   </section>
   <section>
      <h2>Appearance</h2>
      <p>The coypu distinctly resembles an otter and the word ‘Nutria’ is Spanish for otter. An adult coypu may weigh up to 9kg and grow to 600mm long, it is a powerful swimmer with webbed rear feet. It can hold and manipulate things using it’s long-clawed front feet. It’s tail is long and scaly, but not in anyway flattened.</p>
   </section>
</main>

Any navigation that allows jumps to areas within the blog entry’s content should also be contained within the main element.

<main role="main">
   <header>   
      <h1>The Coypu</h1>
      <nav>
         <a href="#intro">Introduction</a>
         <a href="#loc">Location</a>
         <a href="#app">Appearance</a>
      </nav>
   </header>   
   <section id="intro">
      <h2>Introduction</h2>
      <p>The ‘Coypu’ (or ‘Swamp Beaver’ as it is elsewhere known) is a rodent, related to the porcupine. It is an aquatic animal, making burrows in the banks of streams and feeding on plants in or near to the water.</p>
   </section>
   <section id="loc">
      <h2>Location</h2>
      <p>The coypu's original home is in South America but due to it's beautiful long soft coat, the coypu has been farmed in many parts of the world including Britain, where in particular, it had escaped and established itself successfully in the countryside of Norfolk and North Suffolk to become a major pest by damaging riverbanks and crops.</p>
   </section>
   <section id="app">
      <h2>Appearance</h2>
      <p>The coypu distinctly resembles an otter and the word ‘Nutria’ is Spanish for otter. An adult coypu may weigh up to 9kg and grow to 600mm long, it is a powerful swimmer with webbed rear feet. It can hold and manipulate things using it’s long-clawed front feet. It’s tail is long and scaly, but not in anyway flattened.</p>
   </section>
</main>

Got it? Good.