Semantic Structure: Naming the Regions of Your Page

Your page has a photo, words, a list, and a link, all stacked in a flat, unlabeled column. This lesson wraps it in named regions, and gives it real navigation between them.

The concept

Here is your page as it stands. Run it:

One page, one long scroll, with no way to jump to any part of it. Now run the same content, restructured:

Click one of the three links under the photo. The page jumps straight to that section, the same href="#id" trick from the links lesson, now put to real use. Visually, the rest of this page looks almost the same as the flat version above: content stacked top to bottom, nothing dramatically redrawn. What changed is not how it looks. It is what each region now says about itself. The top says this is identity and navigation. The middle says this is the actual content. The bottom says this is the closing note. A screen reader can announce that structure and jump to any part of it, exactly like the links you clicked.

The syntax

Five elements, each naming a role:

<header>...</header>
<nav>...</nav>
<main>...</main>
<section id="name">...</section>
<footer>...</footer>

<header> holds your page's identity: your name, and usually the navigation that goes with it. <nav> marks a region whose job is navigation, most often a set of links like yours. <main> holds the page's actual content, the part that makes this page this page. A page should have exactly one. <section> marks one distinct, named part inside main, typically with its own heading and, when a nav link needs to reach it, an id. <footer> closes the page out.

None of these are new in shape. They nest and close like every element before them. What is new is the name itself. Each one tells a reader, a search engine, or a screen reader exactly what role that part of the page plays.

A minimal working example

<header>
  <h1>Grandma's Fried Rice</h1>
  <nav>
    <a href="#ingredients">Ingredients</a>
    <a href="#instructions">Instructions</a>
  </nav>
</header>
<main>
  <section id="ingredients">
    <h2>Ingredients</h2>
    <p>Rice, eggs, whatever vegetables you have.</p>
  </section>
  <section id="instructions">
    <h2>Instructions</h2>
    <p>Cook the rice a day ahead if you can.</p>
  </section>
</main>
<footer>
  <p>A weeknight recipe that survives substitutions.</p>
</footer>

Same recipe from the headings lesson, now with a jump-to-section nav and a labeled shape around it.

Common mistakes

One giant <section> around everything. You wrap the whole page in a single <section>, satisfied that the tag appears somewhere. Nothing breaks, and nothing is gained either: one section holding everything is no more useful than no sections at all. Each distinct part of the page gets its own.

A nav link whose #id does not match. You write href="#skils" with a typo, while the section's actual id is "skills". Clicking the link does nothing, silently. No error, no red text, only a click that goes nowhere. When a jump link fails, compare the #value character for character against the id it is supposed to match.

More than one <main>. You add a second <main> somewhere further down, maybe to group a different part of the page. The browser renders both without complaint. Nothing looks wrong. A page claiming two "main content" regions has the same problem as two <h1> tags. Whoever is asking what this page is actually about no longer has one clear answer.

Try it yourself

Your page is a flat, unlabeled stack. Give it real structure, in two stages you can check separately.

Stage 1: identity and navigation

1. Run the starting code below. Confirm the page is one long, unlabeled scroll.
2. Wrap your <img> and <h1> together in a <header>. Inside that same <header>, add a <nav> with three links: to #about, #skills and #contact.
3. Run it. Confirm three links appear under your name (About, Skills, Contact). Clicking them will not jump yet, because the sections do not have matching ids. Seeing the links is the check that Stage 1 worked.

Stage 2: content regions

4. Wrap your three <h2> sections (About, Skills, Contact), each with its own content, in a single <main>.
5. Wrap each of those three parts in its own <section>, giving each one a matching id: about, skills, contact.
6. Add a <footer> at the very end, with one short line in it.
7. Run it. Confirm the nav links are visible, then click each one and confirm it jumps to the right section. That is the check that Stage 2 worked.
8. Break it on purpose: move your Contact <section> so it sits in a second <main> of its own, instead of staying inside the first one. Run it. The page looks exactly the same. Here is how you would catch this in real work: read back through your own HTML and count the <main> tags. Two means the page is now claiming two separate "main content" regions, the exact mistake this lesson's Common mistakes section describes. Move Contact back inside the original <main>.

Your page now has real landmarks: identity, navigation, content, and a close, each one named for what it is. Contact still only offers a link to somewhere else. The next lesson adds a real way for a visitor to reach you directly, without leaving the page: an input field.