Further examples on using the main element

←Back to listing

Which is the more correct page layout? – was the question posed over on Stack Overflow with regards to the new HTML5 main element. Neither of them as it turned out, but it did make me think that further examples on how to use the main element might be useful.

I wrote about the main element and included two examples of how it might be used. Of course two examples won’t cover everybody’s situation so a few more might help. Bear in mind that these are my interpretation, after reading the specification, on how the main element can be used so are naturally open to interpretation.

Context and content

Before I go into some examples, remember that it’s all about context and content. Let’s briefly turn to the specification (again) to see what it says:

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

Bear this in mind when you’re trying to work out if your header and/or footer should be inside the main element or not, and whether the aside that you’ve added should also be inside or outside.

The question to ask yourself in each case is: is the content of this element relevant to the main content of this document or not?
If it is – it goes inside the main element, otherwise, outside.

Let’s now look at some examples to help illustrate what I mean (some of these examples might overlap the two in my previous post but that doesn’t really matter).

Examples

<header>
   <h1>The Border Terrier</h1>
   <nav>
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="health.html">Health</a></li>
      </ul>
   </nav>
</header>
<main role="main">
   <h2>Welcome!</h2>
   <p>This site is all about the Border Terrier, the best breed of dog that there is!</p>
</main>
<footer>
   <small>Copyright © <time datetime="2013">2013</time></small>
</footer>

In this short example, both the header and the footer are outside the main element as they are generic to the website and not specific to the content that is within the main element.

<header>
   <h1>The Border Terrier</h1>
   <nav>
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="health.html">Health</a></li>
      </ul>
   </nav>
</header>
<main role="main">
   <section>
      <header>
         <h2>About</h2>
         <nav>
            <ul>
               <li><a href="#basic">Basic</a></li>
               <li><a href="#app">Appearance</a></li>
               <li><a href="#temp">Temperament</a></li>
            </ul>
         </nav>
      </header>
      <section id="basic">
        <h3>Basic Information</h3>
         <p>The Border Terrier is a small, rough-coated breed of dog of the terrier group, originally bred as fox and vermin hunters</p>
         <p>The border terrier was bred to have long enough legs to keep up with the horses and other foxhounds, which traveled with them, and small enough bodies to crawl in the burrows of foxes and chase them out so the hunters had a blank shot. The foxhounds that traveled with them were not small enough to do the Border terrier's job.</p>
      </section>
      <section id="app">
         <h3>Appearance</h3>
         <p>Identifiable by their otter-shaped heads, Border Terriers have a broad skull and short (although many be fairly long), strong muzzle with a scissors bite. The V-shaped ears are on the sides of the head and fall towards the cheeks. Common coat colors are grizzle-and-tan, blue-and-tan, red, or wheaten. Whiskers are few and short. The tail is naturally moderately short, thick at the base and tapering.</p>
      </section>
      <section id="temp">
         <h3>Temperament</h3>
         <p>Though sometimes stubborn and strong willed, border terriers are, on the whole very even tempered, and are friendly and rarely aggressive. They are very good with children, but may chase cats and any other small pets.</p>
      </section>
      <footer>
         <a href="#basic">Basic</a> - <a href="#app">Appearance</a> - <a href="#temp">Temperament</a>
      </footer>
   </section>
</main>
<footer>
   <small>Copyright © <time datetime="2013">2013</time></small>
</footer>

Here, the same generic header and footer elements remain outside main, but there is an additional header element within the main element as its content is relevant to the content within the main element only as it contains a relevant heading and in-page navigation. The in-page navigation is repeated within a footer which is again within the main element.

<header>
   <h1>The Border Terrier</h1>
   <nav>
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="health.html">Health</a></li>
      </ul>
   </nav>
</header>
<main role="main">
   <section>
      <header>
         <h2>About</h2>
         <nav>
            <ul>
               <li><a href="#basic">Basic</a></li>
               <li><a href="#app">Appearance</a></li>
               <li><a href="#temp">Temperament</a></li>
            </ul>
         </nav>
      </header>
      <section id="basic">
        <h3>Basic Information</h3>
         <p>The Border Terrier is a small, rough-coated breed of dog of the terrier group, originally bred as fox and vermin hunters</p>
         <p>The border terrier was bred to have long enough legs to keep up with the horses and other foxhounds, which traveled with them, and small enough bodies to crawl in the burrows of foxes and chase them out so the hunters had a blank shot. The foxhounds that traveled with them were not small enough to do the Border terrier's job.</p>
      </section>
      <section id="app">
         <h3>Appearance</h3>
         <p>Identifiable by their otter-shaped heads, Border Terriers have a broad skull and short (although many be fairly long), strong muzzle with a scissors bite. The V-shaped ears are on the sides of the head and fall towards the cheeks. Common coat colors are grizzle-and-tan, blue-and-tan, red, or wheaten. Whiskers are few and short. The tail is naturally moderately short, thick at the base and tapering.</p>
      </section>
      <section id="temp">
         <h3>Temperament</h3>
         <p>Though sometimes stubborn and strong willed, border terriers are, on the whole very even tempered, and are friendly and rarely aggressive. They are very good with children, but may chase cats and any other small pets.</p>
      </section>
      <aside>
         <h3>History</h3>
         <p>The Border Terrier originates in, and takes its name from the Scottish borders. Their original purpose was to bolt foxes which had gone to ground. They were also used to kill rodents, but they have been used to hunt otters and badgers too.</p>
      </aside>
      <footer>
         <a href="#basic">Basic</a> - <a href="#app">Appearance</a> - <a href="#temp">Temperament</a>
      </footer>
   </section>
</main>
<footer>
   <small>Copyright © <time datetime="2013">2013</time></small>
</footer>

This example is largely the same as the second one except that we have introduced an aside into the fray. The content of the aside is considered to be relevant to the content within the main element, which is all about the Border Terrier, so the aside is placed within the main element.

<header>
   <h1>The Border Terrier</h1>
   <nav>
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="health.html">Health</a></li>
      </ul>
   </nav>
</header>
<main role="main">
   <h2>Welcome!</h2>
   <p>This site is all about the Border Terrier, the best breed of dog that there is!</p>
</main>
<aside class="advert">
   <h2>Border Farm Breeders</h2>
   <p>We are a certified breeder of Border Terriers, contact us at...</p>
</aside>
<aside class="advert">
   <h2>Grumpy's Pet Shop</h2>
   <p>Get all your pet's needs at our shop!</p>
</aside>

<footer>
   <small>Copyright © <time datetime="2013">2013</time></small>
</footer>

In this final example, two aside elements containg adverts have been placed outside the main element as their content is not specific to the content within main. These asides could be on any page, as they are as generic as the header and footer shown in this example.

I hope these further examples have helped clear a few things up. If not, feel free to comment below!