HTML en CSS leren: Semantische blokken
Blokken met betekenis
Hildes neef zegt dat Google de site "niet snapt". Voor een browser is het één grote hoop tekst: waar is het menu, waar staat het adres? Tijd om de pagina te verdelen in blokken die zeggen wat ze zijn.
De delen van een pagina
Bijna elke site heeft dezelfde delen, en HTML heeft voor elk een element. <header> is de kop bovenaan, met het logo en de naam. <nav> bevat het menu: de links naar de andere pagina's. <main> is de hoofdinhoud, die er maar één keer is. <footer> is de voet onderaan, met het adres en de contactgegevens.
Zulke elementen heten semantisch: hun naam zegt wat erin staat. Op zich zien ze er niet anders uit dan een gewone doos. Hier kleurt de CSS van het asiel de header en de footer.
Het verschil merk je pas als je niet kijkt: een voorleesprogramma springt meteen naar het menu of de hoofdinhoud, en Google weet wat de inhoud is en wat de rand.
<!DOCTYPE html><html lang="nl"> <head> <title>Dierenasiel Het Warme Mandje</title> <link rel="stylesheet" href="basis.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <img src="mandje.svg" alt="" width="48" height="48"> <h1>Het Warme Mandje</h1> <p class="slogan">Dierenasiel in Roeselare</p> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="honden.html">Honden</a></li> <li><a href="katten.html">Katten</a></li> <li><a href="adopteren.html">Adopteren</a></li> </ul> </nav> </header> <main> <section id="dieren"> <h2>Zoekt een thuis</h2> <article class="kaart"> <img src="hond.svg" alt="Rex, een bruine labrador" width="64" height="64"> <h3>Rex</h3> <p>Rustige <span class="ras">labrador</span> van 8 jaar.</p> </article> <article class="kaart"> <img src="kat.svg" alt="Minou, een grijze kat" width="64" height="64"> <h3>Minou</h3> <p>Speelse <span class="ras">Europese korthaar</span> van 2 jaar.</p> </article> </section> <section id="openingsuren"> <h2>Openingsuren</h2> <table> <tr> <th>Dag</th> <th>Uren</th> </tr> <tr> <td>Woensdag</td> <td>13 tot 17 uur</td> </tr> <tr> <td>Zaterdag</td> <td>10 tot 16 uur</td> </tr> </table> <p>Op zondag zijn we <span class="dicht">gesloten</span>.</p> </section> <section id="adopteren"> <h2>Zo adopteer je</h2> <ol> <li>Vul het adoptieformulier in.</li> <li>Kom kennismaken met je dier.</li> <li>Neem je nieuwe huisgenoot mee naar huis.</li> </ol> </section> </main> <footer> <p>Mandjesstraat 3, 8800 Roeselare</p> </footer> </body></html>Section en article
In <main> verdeel je de inhoud verder. Een <section> is een hoofdstuk van de pagina, met een eigen kop: de dieren, de openingsuren, hoe je adopteert.
Een <article> is een stuk dat op zichzelf staat. Je zou het los kunnen delen, zoals een nieuwsbericht of het kaartje van één dier.
Een section bevat vaak articles: het hoofdstuk Zoekt een thuis heeft een kaartje per dier.
<main> <section> <h2>Zoekt een thuis</h2> <article class="kaart"> <h3>Rex</h3> <p>Rustige labrador van 8 jaar.</p> </article> <article class="kaart"> <h3>Minou</h3> <p>Speelse kat van 2 jaar.</p> </article> </section></main>Probeer het zelf
Verdeel de pagina in blokken: de naam in een <header>, de kop en de alinea over de dieren in <main>, en het adres in een <footer>.
<h1>Het Warme Mandje</h1><h2>Zoekt een thuis</h2><p>Rex, Bella en Minou wachten op een warm mandje.</p><p>Mandjesstraat 3, 8800 Roeselare</p>body { margin: 0; font-family: system-ui, sans-serif; background: #fffaf3; color: #3d2b1f;}header { padding: 20px 16px 14px; background: #f6c88f;}header h1 { margin: 4px 0 0;}.slogan { margin: 4px 0 10px;}nav ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none;}nav a { color: #7a3e12; font-weight: bold;}main { padding: 8px 16px 24px;}table { border-collapse: collapse;}th,td { padding: 6px 12px; border: 1px solid #e3c9a8; text-align: left;}th { background: #fbe3c4;}.kaart { margin: 12px 0; padding: 12px 16px; border-radius: 16px; background: #ffffff;}.kaart h3 { margin: 4px 0;}.kader { padding: 4px 16px; border-radius: 16px; background: #fde9d4;}.ras { color: #b5541c;}.dicht { color: #b42318; font-weight: bold;}footer { padding: 12px 16px; background: #f6c88f;}Klaar voor meer?
De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.
Begin aan de les