HTML5 Structural Elements

There are a group of HTML elements that are created to broadly give our documents more structure. You've already used the first section element: body.

Body

The body element contains all of the content of our document.

This typically encompasses everything except the meta element and its sub elements.

Main

Most webpages contain a lot of information that is repeated across the site. This includes branding, navigation, advertisements and copyright information.

The main element is used to designate the unique content of each page.

In the example below, the chile recipe is the unique content. The main element is wrapped around the recipe parts:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Chili Recipe</title>
</head>
<body>
   <h1>Recipe Book</h1>
   <nav>
      <ul>
         <li><a href="recipes.html">Recipes</a></li>
         <li><a href="tips.html">Tips</a></li>
         <li><a href="about.html">About</a></li>
      </ul>
   </nav>
   
   <main>
      <h2>Recipe for Chili</h2>
      <p>Instructions...</p>
   </main>
   
   <footer>Copyright, me</footer>
   
</body>
</html>

HTML5 Sectioning Content

Several of these structural elements fall into the category of "sectioning content".

Article & Section

The article and section elements are both used similarly to represent thematic parts of a document. The primary difference between the two is that articles are meant to encapsulate content that is self-contained.

When deciding between an article or section, consider whether the content would still make sense if taken out of its current page. This indicates and article.

A section on the other hand, is only a part of a greater whole and does not stand on its own.

Consider the following example of a simple recipe:

<h1>PB&J Sandwiches</h1>
<p>Here's how to make this snack staple.</p> 

<h2>Ingredients</h2>
<ul>
   <li>Peanut Butter</li>
   <li>Jelly</li>
   <li>Bread</li>
</ul>

<h2>Instructions</h2>
<ol>
   <li>Get two slices of bread.</li>
   <li>Spread peanut butter on one side of both slices.</li>
   <li>Spread jelly over the peanut button on one slice of bread.</li>
   <li>Press bread slices together.</li>
</ol>

The recipe as a whole can stand on its own. This indicates it should be marked up as an article.

The two sub sections of the recipe do not stand on their own and therefore should each be a section.

Marking up the recipe with articles and sections would look like this:

<article>
   <h1>PB&J Sandwiches</h1>
   <p>Here's how to make this snack staple.</p> 
   
   <section>
      <h2>Ingredients</h2>
      <ul>
         <li>Peanut Butter</li>
         <li>Jelly</li>
         <li>Bread</li>
      </ul>
   </section>

   <section>
      <h2>Instructions</h2>
      <ol>
         <li>Get two slices of bread.</li>
         <li>Spread peanut butter on one side of both slices.</li>
         <li>Spread jelly over the peanut button on one slice of bread.</li>
         <li>Press bread slices together.</li>
      </ol>
   </section>
</article>

Note: Both article and section elements can also contain article and section elements.

Aside

The aside element represents content that is tangentially related to the parent element.

This element is named after a sidebar. However, don't consider it only a sidebar since that implies the content will appear on the side. An aside could show in a variety of contexts and visual treatments.

Some examples of valid asides could be:

pull quotes
background information
supplementary links
callouts

Nav

The nav element is used to indicate areas of the page used for primary navigation.

There can be multiple nav elements on a page. However, this element should be reserved for primary navigational areas rather than simply lists of links.

<nav>
   <ul>
      <li><a href="mac.html" title="Mac computers">Mac</a></li>
      <li><a href="ipad.html" title="Learn about iPads">iPad</a></li>
      <li><a href="iphone.html" title="Learn about iPhones">iPhone</a></li>
      <li><a href="support.html" title="Get support">Support</a></li>
   </ul>
</nav>

Header & Footer

The header and footer elements are both used within the context of their containing element.

The most common form is when the containing element is the body element.

When the containing element is `body`

In this case the header is typically used to indicate the website branding and main navigation elements.

The footer would be used to mark up content at the end of the page: copyright information, navigation links, or other content.

<header>
   <p><img src="logo.png" alt="Apple Inc."></p>

   <nav>
      <ul>
         <li><a href="recipes.html">Recipes</a></li>
         <li><a href="tips.html">Tips</a></li>
         <li><a href="about.html">About</a></li>
      </ul>
   </nav>
</header>

<main>
   <article>
      <h1>Chili Recipe</h1>
      <p>Chili....</p>
   </article>
</main>

<footer>
   <small>All recipes © me</small>

   <ul>
      <li>
         <a href="sitemap.html">Sitemap</a>
         <a href="legal.html">Legal</a>
      </li>
   </ul>
</footer>

When the containing element is an `article` or `section`

In this case the header will mark up the introductory elements of the section or article. The footer will mark up the closing elements

<article>
   <header>
      <h1>PB&J Sandwiches</h1>
      <p>Contributed by Dane</p>
   </header>
   
   <p>Here's how to make this snack staple.</p> 
   
   <section>
      <h2>Ingredients</h2>
      <ul>
         <li>Peanut Butter</li>
         <li>Jelly</li>
         <li>Bread</li>
      </ul>
   </section>

   <section>
      <h2>Instructions</h2>
      <ol>
         <li>Get two slices of bread.</li>
         <li>Spread peanut butter on one side of both slices.</li>
         <li>Spread jelly over the peanut button on one slice of bread.</li>
         <li>Press bread slices together.</li>
      </ol>
   </section>

   <footer>
      <p>More great recipes from Dane can be found <a href="#">here</a></p>
   </footer>
</article>

Back to Week 3 page »