Semantic Sections and Page Landmarks

In Year One, you learned that HTML gives a page structure. In Year Two, you start making that structure more meaningful.

A beginner page can technically work if everything is wrapped in generic containers like:

<div>Site title and links</div>
<div>Main lesson content</div>
<div>Helpful side note</div>
<div>Copyright line</div>

The problem is that those containers do not explain their jobs. A person reading the code has to guess. A browser can display it, but the code is harder to scan, maintain, and connect to accessibility tools.

Semantic sections use tags whose names describe the purpose of that part of the page. They help answer: "What job does this area have?"

A generic container is useful when you only need a wrapper. The most common generic container is div. It does not tell you what the content means. It simply groups content.

Semantic section tags are different because the tag name gives meaning:

<header>Intro or top area</header>
<nav>Navigation links</nav>
<main>The main content of the page</main>
<section>A themed part of the page</section>
<article>A standalone piece of content</article>
<aside>Related or supporting content</aside>
<footer>Ending information</footer>

You will still use div sometimes. The goal is not to replace every div. The goal is to use semantic tags when the part of the page has a clear meaning.

A landmark is a major page region. Landmarks help humans scan a page and help assistive technology move through important areas.

Use these tags calmly:

header: Intro content for the page or a section. It often contains a title, logo, or short intro.
nav: A group of navigation links. Do not use nav for every single link; use it for a real navigation area.
main: The primary content of the page. Most pages should have one main element.
section: A themed group of related content. A section usually deserves a heading.
article: A piece of content that can stand on its own, like a post, guide, update, or card-style article.
aside: Supporting content related to the main content, such as a tip, related links, or background note.
footer: Ending information for a page or section, often copyright, contact, or closing links.

These tags do not automatically make the page look special. Their main job is meaning. Styling comes later with CSS.

Here is a readable beginner structure for a small Academy-style page:

<header>
<h1>HTML Builder Lab</h1>
<nav>
<a href="/lessons/">Lessons</a>
<a href="/glossary/">Glossary</a>
</nav>
</header>

<main>
<section>
<h2>Today&apos;s lesson</h2>
<p>Practice using semantic sections.</p>
</section>

<aside>
<h2>Helpful reminder</h2>
<p>Use one main area for the primary content.</p>
</aside>
</main>

<footer>
<p>Keep building one clear page at a time.</p>
</footer>

Notice that the structure reads almost like an outline. Header, navigation, main lesson content, supporting reminder, and footer each have a clear role.

Beginners often misuse semantic tags in a few predictable ways.

Mistake 1: Using section just because you want spacing. If the area does not have a clear theme or heading, a div may be better.

Mistake 2: Putting everything inside article. Use article for content that could stand on its own, not every page block.

Mistake 3: Using many main elements. A normal page should have one main area for the primary content.

Mistake 4: Treating semantic HTML as styling. A footer is not a visual style by itself. It means "this is ending information." CSS handles how it looks.

Mistake 5: Forgetting nav when links are a real menu. A few inline links inside a paragraph do not need nav, but a site menu usually does.

Semantic sections make pages easier to understand before styling ever begins. They give your HTML a meaningful outline.

Keep these beginner rules close:

Use header for intro or top-area content.
Use nav for a real group of navigation links.
Use main for the primary page content.
Use section for a themed group, usually with a heading.
Use article for content that can stand on its own.
Use aside for related support content.
Use footer for closing information.

The next lesson builds on this by focusing on navigation. That will feel easier if you already understand where nav belongs in a semantic page.