Semantic structure — Create Websites With Me

In the last lesson you built a complete page, but everything in the body sat together with no real structure. A browser will happily display that, yet it has no idea which part is the navigation, which is the main content, and which is the footer. This lesson fixes that. You will give your page a skeleton out of semantic elements, and in doing so you will start building the personal site you carry through the rest of the course.

Landmarks, not just containers

For years people built pages out of nothing but <div> elements, a generic box with no meaning of its own. The <div> is still useful, but HTML gives us a set of elements that actually name what a region is: a header, a navigation block, the main content, a footer. These are often called landmarks, because they let software find its way around a page the same way you would glance at a printed page and tell the masthead from the body from the small print at the bottom.

Choosing the right element comes down to meaning rather than how it looks. Screen readers, search engines, and browser tools all read these elements to understand the shape of your page, and you get that understanding for free simply by reaching for the correct tag.

The outer skeleton: header, main, and footer

Most pages share the same three broad regions: a <header> at the top, the <main> content in the middle, and a <footer> at the bottom.

<body>
  <header>
    <!-- site name and navigation -->
  </header>

  <main>
    <!-- the unique content of this page -->
  </main>

  <footer>
    <!-- copyright, small print, links -->
  </footer>
</body>

Two rules are worth committing to memory. A page should have exactly one <main>, and it should wrap the content that is unique to that page rather than the parts repeated across the whole site. The <header> and <footer> here belong to the site as a whole, though <header> can also be used inside other elements, which you will see in later lessons.

Your site needs a way to move around, and that belongs in a <nav>. It usually lives inside the header and holds a list of links. Building it from a list does real work: it tells assistive technology how many items there are and lets people move through them in order.

<header>
  <a href="/">Jordan Reese</a>
  <nav aria-label="Primary">
    <ul>
      <li><a href="#work">Work</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

The aria-label gives this navigation a name. A page can have more than one <nav>, a primary one in the header and a smaller one in the footer for example, and labelling them is how someone using a screen reader can tell which is which.

Inside main: sections and articles

Within <main>, you group related content, and two elements do most of that work. The difference between them is worth getting right.

A <section> is a thematic grouping of content, usually with its own heading. The parts of your personal site, your work, your background, and a way to reach you, are each a section.

An <article> is a piece of content that would still make sense if you lifted it out of the page entirely. A blog post, a news story, or a single product card are good candidates. If you can imagine it standing on its own in a feed or a reader, it is probably an article.

<main>
  <section id="work">
    <h2>Selected work</h2>
    <!-- ... -->
  </section>

  <section id="about">
    <h2>About</h2>
    <!-- ... -->
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <!-- ... -->
  </section>
</main>

Notice that each section has a heading. A <section> without one is usually a sign you really wanted a plain <div>, which groups things for styling without claiming to be a meaningful region.

aside: content off to one side

An <aside> holds content that relates to the main content but is not essential to it: a pull quote, a small sidebar of links, or a short list of interests beside a longer biography. On the site we are building, a list of what you do outside of work fits nicely in an <aside> next to your about text.

Putting it together

Here is the skeleton of your personal site using all of these elements. There is no styling yet and the words are placeholder, but the structure is real and correct. Switch to the Preview tab to see the bare bones render, and compare it with the finished, styled version of this exact structure at kylelaverty.com.

<body>
<header>
  <a href="/">Jordan Reese</a>
  <nav aria-label="Primary">
    <ul>
      <li><a href="#work">Work</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="intro">
    <h1>Jordan Reese</h1>
    <p>I build websites in Asheville, NC.</p>
  </section>

  <section id="work">
    <h2>Selected work</h2>
    <p>A few projects I am proud of.</p>
  </section>

  <section id="about">
    <h2>About</h2>
    <p>A little about how I got here.</p>
    <aside>
      <h3>Outside of work</h3>
      <p>Hiking, film photography, and a lot of coffee.</p>
    </aside>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>The best ways to reach me.</p>
  </section>

</main>

<footer>
  <p>&copy; 2026 Jordan Reese</p>
</footer>
</body>

That is the bones of a real site. Over the next lessons you will give the headings a proper outline, add images and a working contact form, and then bring the whole thing to life with color, type, and layout.