Beschrijving
Sectioning
Zorg op elke pagina voor de juiste landmark regions in de body: header, main en footer. Controleer ook de head van elk bestand: pas de paginatitel en taal (lang) aan.
Navigatie
Op elke pagina staan twee links in de header: eentje naar 'home' en eentje naar 'projecten'. Plaats deze in een semantische nav-tag en gebruik een ongeordende lijst. Gebruik altijd relatieve paden.
Main content
In de main van elke pagina plaats je een h1. Volg daarna de structuur van de screenshots en voeg zelf afbeeldingen toe.
Doelstellingen van de oefening
- Zet de basisstructuur van een HTML-pagina op, inclusief de vereiste elementen in de head en body.
- Gebruik semantische HTML-tags zoals header, main, footer, nav, section, ul en li.
- Maak een navigatiestructuur en gebruik altijd relatieve paden tussen pagina's.
- Valideer je oplossing regelmatig met de W3C-validator en aXe DevTools.
- Organiseer je project in een logische mappenstructuur.
- Voeg relevante metadata toe in de head (titel en taal).
- Voeg afbeeldingen toe aan je project met relatieve paden.
- Gebruik altijd een h1 in het main-element.
Reflectie
-
Wauw!
Het maken van de HTML ging redelijk vlot.
-
Au!
Vergeten Header / Footer te gebruiken.
Gerelateerde links
Gebruik deze tools om je code te controleren: