HTML en CSS leren: Nadruk
Nadruk en regeleindes
"Nieuw: zeezout-karamel!" Marieke wil dat iedereen het ziet. "Kan je dat woord dikker maken?" Kan zeker. Maar dikker is niet het hele verhaal.
strong en em
Soms is één woord belangrijker dan de rest van de zin. Zet het in <strong>: de browser toont het vet, en een voorleesprogramma legt er de klemtoon op.
<em>, van "emphasis", legt nadruk zoals je die uitspreekt: "dat is echt lekker", met de klemtoon op echt. De browser zet het schuin.
Ze staan midden in een zin, binnen een <p>: de zin loopt gewoon door, op dezelfde regel.
<main> <p><strong>Nieuw:</strong> zeezout-karamel.</p> <p>Dat is <em>echt</em> lekker, zegt Marieke.</p></main>Waarom niet b?
<b> en <i> bestaan ook, en ze zien er hetzelfde uit: vet en schuin. Maar ze betekenen niets. <b> zegt alleen "zet dit vet", en een voorleesprogramma leest het als gewone tekst.
HTML gaat over betekenis, niet over uiterlijk. Is iets belangrijk? <strong>. Leg je klemtoon? <em>. Wil je alleen dat iets er anders uitziet? Dan is CSS je gereedschap, vanaf module 2.
<main> <p><strong>Belangrijk</strong> en <b>gewoon vet</b>.</p> <p><em>Klemtoon</em> en <i>gewoon schuin</i>.</p></main>Een nieuwe regel met br
Een adres staat op twee regels, maar het is één geheel: één alinea. Een enter in je code helpt niet, die werd een spatie, weet je nog? Daarvoor is er <br>: een regeleinde.
<br> heeft geen inhoud en dus ook geen sluittag. Zo'n element heet een leeg element.
Gebruik <br> niet om ruimte tussen alinea's te maken: daarvoor zijn er gewoon twee <p>'s.
<main> <h2>Adres</h2> <p>Zeedijk 12<br>8400 Oostende</p></main>Probeer het zelf
Maak gratis belangrijk en leg klemtoon op echt. Kies de elementen die iets betekenen.
<main> <p>Bij elke coupe een gratis wafeltje.</p> <p>Proef het, het is echt de moeite.</p></main>body { margin: 0; font-family: system-ui, sans-serif; background: #fff8f0; color: #3b2a1a;}header { padding: 24px 16px; background: #ffd6e0;}.logo { display: inline-block; margin: 8px 0 0; padding: 6px 18px; border-radius: 999px; background: #ffffff; font-size: 28px;}.slogan { margin: 8px 0 0;}main { padding: 8px 16px 24px;}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