Semantic Tags: header, nav, main, footer

Give the sections of your page real meaning

7 min read

So far you have organized your page mostly with headings and paragraphs. HTML also offers a set of tags whose entire job is to describe the role of a section of the page - these are called semantic tags, and they make your page's structure much clearer, both to you and to the browser.

What "semantic" means

"Semantic" simply means "related to meaning". A semantic tag tells you what a section is for, not just how it looks. Compare a generic label like "section 3" to a clear one like "navigation menu" - the second tells you exactly what to expect.

Header

The header tag wraps the introductory content at the top of a page or section - often a site title and maybe a short tagline.

<header>
<h1>Alex's Website</h1>
<p>Photographer and hiker</p>
</header>

Nav

The nav tag wraps your main navigation links - the links visitors use to get around your site, like "Home", "About", and "Contact".

<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>

Main

The main tag wraps the primary content of the page - the actual content that makes this page unique, as opposed to things repeated on every page like the header and navigation.

<main>
<h2>About Me</h2>
<p>I love taking photos of mountains and rivers.</p>
</main>

Footer

The footer tag wraps closing content at the bottom of the page, like a copyright line or a link to your email address.

<footer>
<p>Thanks for visiting my page!</p>
</footer>

You could build a page using nothing but div tags with no semantic meaning at all, and it would still work. But header, nav, main, and footer make your intentions obvious at a glance, and they help screen readers describe your page's layout to visitors who cannot see it.

Putting the sections together

A full page skeleton using these tags, inside the body you learned about in module one, might look like this:

<body>
<header>
<h1>Alex's Website</h1>
</header>
<nav>
<a href="index.html">Home</a>
</nav>
<main>
<h2>About Me</h2>
<p>Welcome to my page.</p>
</main>
<footer>
<p>Made with Gwecode.</p>
</footer>
</body>

Each section now clearly says what it is for. In the next lesson you will learn classes and ids, which let you label any element, semantic or not, so you can style or target it precisely.

Quick check

Q1 Which tag is meant to hold the main navigation links of a site?

Q2 What kind of content typically goes in the <main> tag?

Want to save your progress? It's free.

Create a free account