computer-science.dev
Docs
computer-science.dev

Lesson 5: Sections

Semantic elements provide document outlines that search engines, screen readers, and future developers can understand.

In this section, we will cover site headers, footers, and generic layout sectioning.

Choosing the right elements while you write your HTML means you do not have to write code comments mapping out your closing tags.

Let’s build a site header. We will start with a non-semantic layout to show how semantic tags make your life easier.

If you use generic containers, your code might look like this.

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS can style this to look correct, but you have to use extra classes or IDs to target the elements. You also end up writing code comments to keep track of which closing div goes where.

Using IDs and classes does not help search engines or screen readers understand what your content is. You can add special role attributes to help screen readers, but that is extra work.

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
  <div>
    <!-- end of header -->
  </div>
</div>

If you use semantic HTML, you do not need role attributes or closing tag comments.

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

This markup uses <header> and <nav> semantic landmarks.

When a <header> is at the top level of the body, screen readers recognize it as the main header of the site. If you put it inside a specific article or section, it acts as a header for just that section.

The <nav> tag defines a navigation area. Screen readers use this structure to let users jump straight to main links or skip past them.

Let’s write a site footer.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Like headers, a top-level <footer> acts as the main footer of the page, holding copyright notices, privacy policies, and contact links. If nested inside an article or section, it is a local footer for just that part.

Footers often contain contact details. Wrap these in the <address> tag. This tag is meant for contact details of authors or organizations, not a regular physical shipping address.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>
    Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a>
  </address>
</footer>

Document structure

The most common page layout has a header, main content, sidebar, and footer. This is a classic website design.

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

If you are building a blog, you might wrap posts in article tags.

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Using semantic elements helps screen readers understand your page outline automatically. Here are the main structure tags.

main

The <main> tag defines the main content of the document. There must be only one <main> tag per page.

aside

The <aside> tag holds content that is extra or related to the main page but could be separated, like sidebars, callout boxes, or advertisements.

article

An <article> wraps a complete, self-contained section of content that is independently reusable, like a blog post or a news story.

section

The <section> tag wraps generic standalone document sections when there is no more specific tag to use. Sections should always contain a heading.

Headings

We have six heading levels from <h1> to <h6>. <h1> is the most important, and <h6> is the lowest.

Use heading levels logically to build a document outline. Start with <h1> for the main title, <h2> for sections, and <h3> for subsections. Do not skip levels.

Screen reader users navigate pages by jumping between headings, so a logical outline is important for accessibility.

Outlining the body of MLW.com

Here is our document outline for the workshop homepage.

<header>
  <h1>Machine Learning Workshop</h1>
  <nav></nav>
</header>
<main>
  <header>
    <h1>Full Terabyte Machine Learning Workshop</h1>
  </header>

  <section id="reg">
    <h2>Machine Learning Workshop Tickets</h2>
  </section>

  <section id="about">
    <h2>What you'll learn</h2>
  </section>

  <section id="teachers">
    <h2>Your Instructors</h2>
    <h3>Hal 9000 <span>&amp;</span> EVE</h3>
  </section>

  <section id="feedback">
    <h2>What it's like to learn good and do other stuff good too</h2>
  </section>
</main>

<footer>
  <h2>
    Delivering accessible, performant, standards-compliant websites since 1999.
  </h2>
</footer>

Since these sections are not independent blog posts, <section> is more appropriate than <article>. Do not use headings to make text bold or large. Use CSS for styling instead.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).

Prev
Lesson 4: Dove Combinator
Next
Lesson 5: Eagle Combinator