HTML Landmark Elements

Landmarks

Landmarks turn a page into clear navigable regions.

Landmark elements such as header, nav, main and footer describe major areas of a page. They are not only layout wrappers; they tell browsers and assistive technology what each region does.

When landmarks are used well, a visitor can jump straight to navigation, main content or footer information without hunting through the page.

Element group: header, nav, main, footer. Large page regions that make a layout easier to understand.

What belongs here

Learn the tags by job, not by memorizing a random list.

`header`

Introductory content for a page or section.

`nav`

A set of major navigation links.

`main`

The unique main content of the page.

`footer`

Closing content for a page or section.

Syntax in context

Landmarks should describe the big regions of the interface.

Most pages need a header, nav, main and footer. Complex pages can also use aside or section where the content needs it.

<header>
  <a href="/">Full Stack Masterclass</a>
</header>
<nav aria-label="Main navigation">
  <a href="/html">HTML</a>
  <a href="/css">CSS</a>
</nav>
<main>
  <h1>HTML Landmarks</h1>
  <p>Landmarks make the page easier to navigate.</p>
</main>
<footer>Contact and legal links</footer>

Good versus weak

The difference is usually meaning, not only syntax.

Good

<header>
  <a href="/">Full Stack Masterclass</a>
</header>
<nav aria-label="Main navigation">
  <a href="/html">HTML</a>
  <a href="/css">CSS</a>
</nav>
<main>
  <h1>HTML Landmarks</h1>
  <p>Landmarks make the page easier to navigate.</p>
</main>
<footer>Contact and legal links</footer>

Weak

<div class="top"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="bottom"></div>

Rules that matter

Use these rules before publishing real HTML.

Label repeated navs

If there are multiple nav elements, give them clear aria-label values.

One main area

Use one main element for the unique content of the page.

Header is contextual

A section can also have its own header when it introduces that section.

Footer can be local

A footer can close a section or the whole page.

Production thinking

HTML is also for accessibility, SEO, security and maintenance.

Why does this matter?

Beginners often ask why this is not just a div with styling. The reason is that HTML is read by browsers, search engines, screen readers and future developers. Clear meaning makes the page easier to use and maintain.

Accessibility

Landmarks create shortcuts for assistive technology. That makes a long page much easier to use.

Production note

Good landmarks make templates readable and reduce the temptation to build everything from generic divs.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change one tag, attribute or text value in the example.
Run the preview and describe exactly what changed.
Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

Change one meaningful part of the HTML, not only the visible text.
Run the preview and check whether the result still makes semantic sense.
Explain why the element or attribute you changed belongs in this exact place.

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  gap: 14px;
  place-content: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  background: #07111f;
  color: #ffffff;
}

.demo-card {
  width: min(760px, calc(100vw - 48px));
  box-sizing: border-box;
  border-radius: 24px;
  padding: 28px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(140, 255, 193, 0.26);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.muted-card { color: #b8c4d6; }
.label, caption {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, strong { color: #8cffc1; }
p, li, dd, figcaption { color: #d6deec; line-height: 1.65; }
a { color: #62d5ff; }
.highlight { color: #8cffc1; font-weight: 800; }
img, iframe, video, svg { max-width: 100%; border-radius: 18px; }
svg { width: 180px; height: 180px; fill: #8cffc1; }
svg text { fill: #07111f; font: 700 20px system-ui, sans-serif; }

input, button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 12px 14px;
  font: inherit;
}

button {
  margin-top: 16px;
  border: 0;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
  cursor: pointer;
}

table { border-collapse: collapse; }
th, td { border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px 14px; }
details { margin-top: 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 14px 16px; }

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?