facebook twitter
Webucator's Free HTML Training Tutorial

Lesson: Sectioning a Web Page

Welcome to our free HTML Training tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

You have already worked with div elements to break out a block of content. But the <div> tag doesn't tell us anything about the content it contains. In this lesson, you will learn about semantic (i.e., logical and meaningful) block-level elements.

Lesson Goals

  • Learn how to use logically separate page content into semantic sections.

Semantic Block-Level Elements

The table below describes HTML block-level elements:

Semantic Block-level Elements
Element Meaning
div Contains a meaningless block of content. Content within a <div> tag is not necessarily related.
section Contains a section of the page that doesn't have any other tag that more meaningfully describes the contained content. All content within a <section> tag should be related. As a rule, if you can give the section a meaningful name, it is better to use a <section> tag than a <div> tag.
header Contains the header of the page. Often used for page headings, possibly some introductory content, and to hold the main navigation of the page. Other page elements (e.g., article, aside) can contain their own headers.
footer Contains the footer of the page. Often used for the company's address or a copyright message or legalese. Other page elements (e.g., article, aside) can contain their own footers.
main Contains the dominant content of the page. You should have only one main element on a page.
nav Contains page or site navigation. You may have multiple nav elements on a page.
aside Contains content that is not directly related to the page's main content. You may have multiple aside elements on a page.
article Contains a self-contained article (e.g., for a blog or news site) that is meant to be able to stand on its own. You may have multiple article elements on a page.

The elements above are all block-level elements with no default formatting. Unless they are styled, there will be no indication that they are included on the page. However, they are not just for styling. They also provide helpful information to screen readers and other devices that inspect or read the page, making it easier for those programs to understand the page content.

In the code below, we show how to use these tags to break up the Runners Home home page. We have added a newsletter sign-up form to show how to use the aside element.

SectioningPage/Demos/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Runners Home&trade;</title>
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="races.html">Races</a></li>
      <li><a href="resources.html">Resources</a></li>
      <li><a href="calculator.html">Calculator</a></li>
      <li><a href="running-log.html">Running Log</a></li>
      <li><a href="my-account.html">My Account</a></li>
      <li><a href="logout.html">Log out</a></li>
    </ul>
  </nav>
</header>
<main>
  <section id="welcome">
    <p>Hello, Stranger!</p>
    <h1>Welcome to Runners Home&trade;</h1>
  </section>
  <section id="logo">
    <img src="images/runners-home.png" alt="Runners Home Logo">
  </section>
  <section id="purpose">
    <p>Runners Home&trade; is dedicated to providing you with:</p>
    <ol>
      <li><a href="races.html">the most up-to-date 
        information on running races</a>.</li>
      <li><a href="resources.html">the best
        resources for runners</a>.</li>
    </ol>
  </section>
</main>
<aside>
  <h3>Newsletter</h3>
  <form method="post" action="newsletter.php">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    <button>Sign Up</button>
  </form>
  <p>Be the first to hear about our great offers.<br>
    Sign up for our newsletter today!</p>
</aside>
<footer>
  &copy; 2020 Runners Home. All rights reserved.
  For questions, send email to
  <a href="mailto:info@runners-home.com">info@runners-home.com</a>.
</footer>
</body>
</html>

Code Explanation

Notice how we used:

  1. A <header> tag to separate the navigation.
  2. A <nav> tag to hold the navigation.
  3. A <main> tag to hold the main content on the page.
  4. An <aside> tag to hold the newsletter form.
  5. A <footer> tag to hold the copyright information and a contact us link.
  6. Several <section> tags for the other structurally meaningful parts: "welcome", "logo", and "purpose".

With no styling, the above code will render the following:Sectioned Page with No Styling

But with CSS, we can use these semantic elements to lay out the page: Sectioned Page with Styling

The article Tag

Mozilla describes the article element as follows:

The HTML article element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.

The major difference between the article element and the section element is that an article element encapsulates content that could stand alone and might be of interest outside the context of the page. The most obvious example is a blog entry or a newspaper article; however, you could also apply this to a product description as you can imagine wanting to syndicate all of your products to a website that aggregates product information from different companies.