HTML Page Layout Elements

Here are two ways to write the top of the Maya's Bakery home page:

<div class="top">
  <h1>Maya's Bakery</h1>
  <div class="links">
    <a href="index.html">Home</a>
    <a href="menu.html">Menu</a>
    <a href="contact.html">Contact</a>
  </div>
</div>

<header>
  <h1>Maya's Bakery</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="menu.html">Menu</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

In the browser the two look exactly the same: the bakery's name as a large heading, and the three links on the line below it. The difference is in what the browser knows. In the first version, the browser sees two <div> elements, which have no meaning, and the class names top and links are only labels for CSS. In the second version, the element names themselves say "this is the top part of the page" and "this is the main navigation". Elements that name the large regions of a page in this way are called page layout elements. They are also called semantic elements, because "semantic" means "having to do with meaning".

This lesson covers seven of them, <header>, <nav>, <main>, <section>, <article>, <aside> and <footer>, and builds the whole bakery home page with them, one region at a time.

What the Browser Does With Them

Without CSS, a page layout element looks like a <div>. Each one starts on a new line and stretches across the page, and none of them changes the size or color of the text. Chrome confirms this: for all seven elements it reports the default style display: block, the value for block elements, and the normal text size.

The meaning matters to the programs that read the page for a person. A screen reader reads a page aloud for people who cannot see the screen. To do that, it asks the browser for a second tree, built from the document tree and called the accessibility tree. In it, each element has a role that says what kind of thing it is: a heading, a link, a paragraph. Several page layout elements get a special kind of role called a landmark. A landmark is a region that the user can jump to directly, with a single key or from a list of the page's regions, instead of listening to the whole page from the top.

A <div> gets no landmark role at all. So on the first version of the bakery's top bar, a screen reader user cannot jump to the links; on the second version, the navigation appears in the list of landmarks.

The Top: <header> and <nav>

The <header> element holds the introductory content of the page: usually the site's name or logo, and often the main navigation. The <nav> element holds a major group of navigation links, such as the links to the other pages of the site.

Not every group of links needs a <nav>. The few links at the bottom of a page, such as a link to the privacy policy, usually stay in the footer without one. A page may have more than one <nav>, for example one for the site and one for the parts of a long page. In that case, give each one a name with the aria-label attribute, such as aria-label="Site". A screen reader announces that name, so its user can tell the two apart.

The bakery page keeps the second version from the start of this lesson as its top part.

The Middle: <main>

The <main> element holds the content that is particular to this page. The site name, the navigation and the footer repeat on every page of the site, so they stay outside it. A "Skip to main content" link at the top of a page usually points to the <main> element, so that keyboard users can jump past the repeated parts. A later chapter, on hyperlinks, explains links to a place on the same page.

Two rules apply to <main>, and the validator checks both:

1. A page may have only one visible <main> element. With two, the validator reports "A document must not include more than one visible main element".
2. The <main> element must not sit inside <header>, <footer>, <nav>, <section>, <article> or <aside>. Put it directly inside <body>, or inside a <div> that only groups the page for styling. Inside a <header>, the validator reports "The main element must not appear as a descendant of the header element".

Inside <main>, the bakery home page has three pieces of content: the opening hours, a news item about a new bread, and the daily special. Each one needs a different element.

Inside <main>: <section>, <article> and <aside>

The opening hours form one part of the page about one topic. A part of this kind is a <section>:

<section>
  <h2>Opening Hours</h2>
  <p>Monday to Saturday, 7 a.m. to <strong>6 p.m.</strong></p>
</section>

A <section> normally starts with a heading that says what the section is about. If you write a <section> without a heading, the validator warns "Section lacks heading" and suggests a <div> instead. The section does not change the heading's level: the heading is still an <h2>, chosen by its place in the page structure, as a later chapter on headings explains.

The news item about the new rye bread is different. It would still make sense if it appeared alone, as a separate page or in a list of the bakery's news. Content of that kind is self-contained, and HTML marks it with <article>. Blog posts, news items, product cards and readers' comments are typical articles. A simple test helps: if you could copy the piece to another site and it would still be complete, it is an article.

<article>
  <header>
    <h2>New Rye Bread</h2>
    <p>Posted by Maya</p>
  </header>
  <p>Our new rye loaf uses flour from a mill ten miles away.</p>
  <footer>
    <p>Available from Monday.</p>
  </footer>
</article>

An article can have its own <header> and <footer>, as this one does. Inside an article, those two elements only mark the article's introduction and closing notes. They are not landmarks, because they do not describe the whole page. Chrome confirms it: in its accessibility tree, the page-level <header> has the role banner, and the <header> inside this article does not.

The daily special is related to the bakery but not part of the opening hours or the news. Content that is only indirectly related to the main content belongs in an <aside>. Browsers do not move an <aside> to the side of the page; that needs CSS. The name describes its meaning, which is often shown as a sidebar or a box.

<aside>
  <h2>Today's Special</h2>
  <p>Walnut and honey loaf, baked fresh at noon.</p>
</aside>

Do not use <aside> for a remark in brackets inside a paragraph. Such text is part of the main flow of the writing.

The Bottom: <footer>

The <footer> element holds the closing information of the page: contact details, the address, copyright notes and small links. Here is the complete home page, with the page's own <footer> at the end:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Maya's Bakery</title>
</head>
<body>
  <header>
    <h1>Maya's Bakery</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="menu.html">Menu</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>Opening Hours</h2>
      <p>Monday to Saturday, 7 a.m. to <strong>6 p.m.</strong></p>
    </section>
    <article>
      <header>
        <h2>New Rye Bread</h2>
        <p>Posted by Maya</p>
      </header>
      <p>Our new rye loaf uses flour from a mill ten miles away.</p>
      <footer>
        <p>Available from Monday.</p>
      </footer>
    </article>
    <aside>
      <h2>Today's Special</h2>
      <p>Walnut and honey loaf, baked fresh at noon.</p>
    </aside>
  </main>
  <footer>
    <p>Maya's Bakery, 12 Mill Road, Springfield</p>
  </footer>
</body>
</html>

This page passes the validator with no errors or warnings.

Compare the two halves of the picture. Every box on the left matches one element in the outline on the right, and the colored label at the top of a box names its landmark role. The gray label "not a landmark" marks the <section>, the <article>, and the header and footer inside the article.

HTML also has a newer <search> element that marks a search form, such as a box for searching the bakery's recipes. Its role is the search landmark, and all major browsers support it. A later chapter on forms explains how to build the form that goes inside it.

When a <div> Is Still Right

The page layout elements do not replace <div>. They replace only the <div> elements that stood for a region with a meaning. Before you choose, ask what the content is. If the answer is "the main navigation" or "a news item", an element above names it. If the answer is "a box that CSS needs, for example to draw a border or to keep the page narrow", use a <div>.

So the bakery could still wrap the whole page in <div class="page"> to center it with CSS, and that is correct markup. Two mistakes are common. The first is to replace every <div> with <section>, which adds sections without headings and gives screen readers nothing useful. The second is to use <article> for any box on the page, even when the content would make no sense alone.

Key Takeaways

• <header>, <nav>, <main>, <section>, <article>, <aside> and <footer> look like <div> in the browser, but each one tells the browser what its content is.
• Screen readers let users jump between landmarks. A page-level <header> is banner, <nav> is navigation, <main> is main, <aside> is complementary and a page-level <footer> is contentinfo.
• A <header> or <footer> inside <article>, <aside>, <main>, <nav> or <section> is not a landmark.
• A page has one visible <main>, and it does not sit inside <header>, <footer>, <nav>, <section>, <article> or <aside>.
• A <section> is a part of the page about one topic and normally starts with a heading. An <article> is content that would make sense alone.
• When no element describes the content, and you need a group only for styling, a <div> is still the right choice.