header nav main en footer
Structureer de belangrijkste paginagebieden met semantische tags
header nav main en footer is een gratis HTML Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
HTML5-landmarkelementen
HTML5 introduceerde landmarkelementen die paginagebieden definiëren:
<header>— inleidende inhoud of navigatie<nav>— navigatielinks<main>— de belangrijkste unieke inhoud<footer>— voettekstinformatie
Ze vervangen generieke <div>s door een betekenisvolle structuur.
Het element header
Het element <header> bevat inleidende inhoud:
<header>
<a href="/" class="logo">
<img src="logo.svg" alt="Company name">
</a>
<nav>...</nav>
<button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->Het element nav
Het element <nav> bevat navigatielinks:
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->Meerdere elementen nav
Een pagina kan meerdere elementen <nav> bevatten — geef elk element een label:
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->Het element main
Het element <main> markeert de belangrijkste inhoud die uniek is voor deze pagina:
<main id="main-content">
<h1>HTML5 Landmark Elements</h1>
<p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
- Only ONE main element per page
- Should not be a descendant of header, footer, aside, nav
- id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->Het element footer
Het element <footer> bevat voettekstinformatie:
<footer>
<p>© 2025 CoddyKit. All rights reserved.</p>
<nav aria-label="Footer navigation">
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
</nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->Paginaskelet
Een complete semantische paginastructuur:
<body>
<header>
<a href="/"><img src="logo.svg" alt="Site name"></a>
<nav aria-label="Main">...</nav>
</header>
<main id="main-content">
<h1>Page Title</h1>
<p>Primary content here.</p>
</main>
<aside>Related content</aside>
<footer>
<p>© 2025 Company</p>
</footer>
</body>Navigatie overslaan met een link
Voeg een link toe waarmee toetsenbordgebruikers de navigatie kunnen overslaan:
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>... navigation ...</header>
<main id="main-content" tabindex="-1">
<h1>Page Heading</h1>
</main>
/* CSS: */
.skip-link {
position: absolute; top: -100%;
background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }Landmarkrollen
HTML5-landmarkelementen worden gekoppeld aan ARIA-landmarkrollen:
<header>→role="banner"(alleen op paginaniveau)<nav>→role="navigation"<main>→role="main"<footer>→role="contentinfo"(alleen op paginaniveau)<aside>→role="complementary"
header en footer in secties
header en footer kunnen binnen <article> en <section> voorkomen:
<article>
<header>
<h2>Article Title</h2>
<p>By Jane Smith | March 2024</p>
</header>
<p>Article content...</p>
<footer>
<p>Tags: HTML, CSS</p>
</footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->Veelgemaakte fouten
Vermijd deze fouten met semantische landmarks:
<nav>gebruiken voor elke groep links- Meerdere elementen
<main>op één pagina <main>binnen<header>of<nav>plaatsen<footer>gebruiken voor inhoud die geen voettekst is
Korte controle
Hoeveel elementen main hoort een pagina te hebben?
Samenvatting: header, nav, main en footer
De essentie van landmarkelementen:
<header>— inleidende inhoud; kan per sectie worden herhaald<nav>— belangrijke navigatie; geef het met aria-label een label als er meerdere zijn<main>— unieke belangrijkste inhoud; precies één per pagina<footer>— voettekstinhoud; kan per sectie worden herhaald- Voeg een link toe die verwijst naar
id="main-content"om de navigatie over te slaan
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “header nav main en footer” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “header nav main en footer”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “header nav main en footer”?
Structureer de belangrijkste paginagebieden met semantische tags Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “header nav main en footer”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- header nav main en footer
- Het article-element voor zelfstandige inhoud
- Het section-element versus div
- time address en mark