HTML en CSS leren: Koppen en alinea's

Koppen en alinea's

Marieke heeft het krijtbord overgetypt: één lange lap tekst. "Kan dat er wat overzichtelijker uitzien? Ik verdwaal zelf in mijn smaken."

Zes niveaus van koppen

HTML heeft zes niveaus van koppen: <h1> tot en met <h6>. <h1> is de titel van de hele pagina, <h2> een hoofdstuk, <h3> een stuk van dat hoofdstuk, en zo verder.

Kies een kop om wat hij betekent, niet om hoe groot hij is: de grootte regel je later met CSS. Zoekmachines en voorleesprogramma's gebruiken de koppen als inhoudstafel.

Daarom: één <h1> per pagina, en sla geen niveau over. Onder een <h2> komt een <h3>, geen <h4>.

index.html

1<main>2  <h1>De Koude Kant</h1>3  <h2>Onze smaken</h2>4  <h3>Fruitig</h3>5  <p>Aardbei, citroen en mango.</p>6  <h3>Romig</h3>7  <p>Vanille, pistache en speculoos.</p>8  <h2>Openingsuren</h2>9  <p>Elke dag van 13 tot 22 uur.</p>10</main>

ijssalon.example

Alinea's en witruimte

Gewone tekst zet je in een alinea: <p>. Elke <p> begint op een nieuwe regel, met wat ruimte erboven en eronder.

Let op: de browser kijkt niet naar hoe je je code typt. Enters en extra spaties worden samen één spatie. Kijk maar naar de eerste alinea hieronder: in de code staat ze op twee regels, op de pagina op één.

Wil je een nieuwe alinea, dan heb je dus een nieuwe <p> nodig.

index.html

1<main>2  <h2>Over ons</h2>3  <p>Marieke draait al twintig zomers4     ijs op de zeedijk.</p>5  <p>Elke ochtend    vers, met melk van een boerderij uit de polder.</p>6</main>

ijssalon.example

Probeer het zelf

Marieke typte de tekst zonder tags. Maak van Openingsuren en IJstaarten hoofdstukken, en van de twee zinnen eronder alinea's.

1<main>2  <h1>De Koude Kant</h1>3  Openingsuren4  Elke dag van 13 tot 22 uur, ook op zondag.5  IJstaarten6  Bestel je taart twee dagen op voorhand.7</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 6 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Zes niveaus van koppen

HTML heeft zes niveaus van koppen: <h1> tot en met <h6>. <h1> is de titel van de hele pagina, <h2> een hoofdstuk, <h3> een stuk van dat hoofdstuk, en zo verder.

Kies een kop om wat hij betekent, niet om hoe groot hij is: de grootte regel je later met CSS. Zoekmachines en voorleesprogramma's gebruiken de koppen als inhoudstafel.

Daarom: één <h1> per pagina, en sla geen niveau over. Onder een <h2> komt een <h3>, geen <h4>.

index.html

1<main>2  <h1>De Koude Kant</h1>3  <h2>Onze smaken</h2>4  <h3>Fruitig</h3>5  <p>Aardbei, citroen en mango.</p>6  <h3>Romig</h3>7  <p>Vanille, pistache en speculoos.</p>8  <h2>Openingsuren</h2>9  <p>Elke dag van 13 tot 22 uur.</p>10</main>

ijssalon.example

Alinea's en witruimte

Gewone tekst zet je in een alinea: <p>. Elke <p> begint op een nieuwe regel, met wat ruimte erboven en eronder.

Wil je een nieuwe alinea, dan heb je dus een nieuwe <p> nodig.

index.html

1<main>2  <h2>Over ons</h2>3  <p>Marieke draait al twintig zomers4     ijs op de zeedijk.</p>5  <p>Elke ochtend    vers, met melk van een boerderij uit de polder.</p>6</main>

ijssalon.example

Probeer het zelf

Marieke typte de tekst zonder tags. Maak van Openingsuren en IJstaarten hoofdstukken, en van de twee zinnen eronder alinea's.

1<main>2  <h1>De Koude Kant</h1>3  Openingsuren4  Elke dag van 13 tot 22 uur, ook op zondag.5  IJstaarten6  Bestel je taart twee dagen op voorhand.7</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