Further examples on using the main element
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.
https://iandevlinhttps://iandevlin
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?
https://iandevlinhttps://iandevlin
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 aside
s 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!