Page Landmarks

After this lesson, you can replace generic wrappers with appropriate header, nav, main, and footer elements.

BEGIN WITH A QUESTION

Understanding begins with a question.

A building without signs for its entrance, main room, or exit is difficult to navigate. Landmarks help readers recognize the major parts of a page.

Replace generic wrappers with appropriate header, nav, main, and footer elements.

UNDERSTAND THE CONCEPT

Four common roles

Header contains introductory content such as the site identity. Nav identifies a primary navigation group. Main contains the page’s distinctive main content. Footer contains closing information such as site details. These elements express roles; their appearance can be styled separately.

Main helps readers find the content

Use one visible main for this simple page. Place recurring site navigation and identity outside it. Assistive technology users can use this structure to reach the main content more quickly.

Meaning depends on context

Header and footer can also appear inside article as its introduction or conclusion. Not every list of links needs nav: reference links in a paragraph are not automatically primary navigation.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<header>
  <p>Reading Garden</p>
  <nav><a href="#koleksi">Collection</a></nav>
</header>
<main>
  <h1>Welcome</h1>
  <h2 id="koleksi">Selected Books</h2>
  <p>Books for an afternoon of reading.</p>
</main>
<footer><p>Notes from a learning community.</p></footer>

BROWSER RESULT

The introduction and navigation precede main; footer closes the page. H1 still names the main content.

COMMON MISTAKES

<main>Site menu</main>
<main>Main article</main>

Do not create multiple visible main elements for different content groups. Use nav for the menu and one main for the main content.

TRY TOGETHER

Practice clarifies understanding.

Complete the landmark for the page’s main content.

<>
  <h1>Book Collection</h1>
</main>

Show a hint

This is the core content, rather than the header or footer.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Name the spaces on the page

Replace the div wrappers with header, nav, main, and footer according to their content. Ensure navigation links to #kegiatan and the main content contains an h1 and an activities section.

<div>
  <p>Community Garden</p>
  <div><a href="#activities">Activities</a></div>
</div>
<div>
  <h1>Let’s Plant</h1>
  <h2 id="activities">Weekly Activities</h2>
  <p>Caring for seedlings together.</p>
</div>
<div><p>Notes from the garden community.</p></div>

index.htmlHTMLLn 1, Col 110 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Landmarks give roles to the major parts of a page.
Use one visible main.
Nav is for important navigation groups.

Semantic structureAccessibility

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Landmark °Semantic HTML °Accessibility °

Library: Three languages behind one page ↗

Next lesson →