Semantic elements and page structure

You could build an entire website from nothing but generic boxes, and it would look fine in a browser. But a page is also read by search engines, screen readers and other programs, and they cannot see your design. Semantic HTML tells them what each part of the page is. In this lesson you will give your portfolio a proper structure.

What “semantic” means

An element is semantic when its name describes its meaning, not its looks. <p> means “paragraph”, <nav> means “navigation”. By contrast, <div> and <span> mean nothing: they are generic containers (block and inline, respectively) that you use when no semantic element fits.

Think of a newspaper. It has a masthead, a table of contents, articles with headlines, sidebars and a colophon. Readers recognize each part at a glance. Semantic elements give your page the same kind of landmarks.

The benefits are concrete:

• Accessibility: screen readers let users jump straight to the navigation or the main content.
• Search engines better understand which part is the main content.
• Maintenance: you and other developers read the code faster than a forest of div elements.
• Built-in behavior: browsers give semantic elements useful defaults.

The page-level elements

Element	Purpose
header	Introductory content of a page or section: logo, title, sometimes the navigation.
nav	A block of major navigation links.
main	The main content of the page. Use it once per page.
section	A thematic grouping of content, normally with its own heading.
article	Self-contained content that would make sense on its own: a blog post, a project card, a comment.
aside	Content related to, but separate from, the main flow: a sidebar, a pull-quote.
footer	Closing content of a page or section: copyright, contact, secondary links.

A structured page

Here is the skeleton of your portfolio home page, using all of them:

<body>
  <header>
    <a href="index.html">Maya Carter</a>
    <nav aria-label="Main">
      <ul>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="intro">
      <h1>Photographer and illustrator</h1>
      <p>I tell stories with light and ink.</p>
    </section>

    <section id="projects">
      <h2>Projects</h2>
      <article>
        <h3>Street portraits</h3>
        <p>A series of portraits taken in my neighborhood.</p>
      </article>
      <article>
        <h3>Botanical drawings</h3>
        <p>Ink drawings of plants from the local market.</p>
      </article>
    </section>

    <section id="about">
      <h2>About me</h2>
      <p>I have been working with images for ten years.</p>
    </section>
  </main>

  <aside>
    <p>Currently booking sessions for next season.</p>
  </aside>

  <footer>
    <p>&copy; Maya Carter. All rights reserved.</p>
  </footer>
</body>

Read it like an outline: a header with the site name and menu, a main area made of an introduction and two sections, an aside, a footer. Even without seeing a single pixel, you understand the page.

Choosing between section, article and div

This is where beginners hesitate. A quick decision guide:

• Could the content be published on its own, such as in a news feed? Use article.
• Is it a thematic block of the page that deserves a heading? Use section.
• Is it only a wrapper that you need for styling or layout? Use div.

A section without a heading is a sign that a div is probably better.

Headings and landmarks together

Semantic elements do not replace headings. The outline of headings is still essential: one h1 for the page, h2 for each major section, h3 for subsections. Elements like header, nav, main, aside and footer additionally create landmarks: places screen reader users can jump to directly.

If a page has several nav elements, such as a main menu and a footer menu, label them with aria-label so they can be told apart: aria-label="Main", aria-label="Footer". We will come back to ARIA, the accessibility attribute family, in chapter 5.

Other useful semantic elements

• figure and figcaption for illustrated content with a caption.
• time for dates and times: <time datetime="2025-06-15">June 15</time>.
• address for contact information about the author of the page or section.
• mark for text highlighted for reference, and small for fine print.
• details and summary for a content area the visitor can open and close, like the solutions in this course.

Planning a page before writing it

A simple technique that professionals use too: sketch the page on paper as boxes, name each box with a semantic element, then write the HTML from the top down. You will do exactly that for the whole site in the last chapter.

Common mistakes

• Using several main elements on one page.
• Wrapping everything in section with no headings.
• Putting the whole page in a single article.
• Putting the navigation links outside any nav and without a list.
• Using div where a semantic element exists, for instance <div class="footer">.

Your turn

Restructure your portfolio.

1. Open index.html and wrap the visible page in header, main and footer.
2. Put your menu in a nav with an aria-label, as a list of links.
3. Create at least two section elements with headings in main: one for projects and one for “About me”.
4. Represent each of your three projects as an article with a heading and a short description.
5. Add a footer with a copyright line containing the © entity.

See a solution

Your structure should look like the example above, with your own content. Check that:

• there is one h1, and each section starts with an h2;
• each project article has an h3;
• the nav contains a ul with one li and one a per link;
• the main element appears only once and is not inside header or footer.

Open the page in your browser: it should look as plain as before. The improvement is invisible, and it is in the structure.