OnderwerpenSpiekbriefjeLessen
Lurndo › HTML & CSS › Nadruk

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.

index.html
1<main>2  <p><strong>Nieuw:</strong> zeezout-karamel.</p>3  <p>Dat is <em>echt</em> lekker, zegt Marieke.</p>4</main>
ijssalon.example

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.

index.html
1<main>2  <p><strong>Belangrijk</strong> en <b>gewoon vet</b>.</p>3  <p><em>Klemtoon</em> en <i>gewoon schuin</i>.</p>4</main>
ijssalon.example

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.

index.html
1<main>2  <h2>Adres</h2>3  <p>Zeedijk 12<br>8400 Oostende</p>4</main>
ijssalon.example

Probeer het zelf

Maak gratis belangrijk en leg klemtoon op echt. Kies de elementen die iets betekenen.

1<main>2  <p>Bij elke coupe een gratis wafeltje.</p>3  <p>Proef het, het is echt de moeite.</p>4</main>
1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}
ijssalon.example

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
← VorigeNesten en de boomVolgende →Links

SQL

  • Onderwerpen
  • Alle lessen
  • Spiekbriefje

Excel

  • Onderwerpen
  • Alle lessen
  • Sneltoetsen

HTML & CSS

  • Onderwerpen
  • Alle lessen
  • Spiekbriefje

Blind typen

  • Over de cursus
  • Alle lessen

Lurndo

  • Dashboard
  • Ranglijst
  • Premium
  • Account
  • Contact en support
  • Privacy
English