HTML en CSS leren: Nesten

Nesten en de boom

"Mijn neef zegt dat HTML een boom is," zegt Marieke. "Ik zie alleen tekst." Tijd om Marieke die boom te tonen.

Elementen in elementen

Een element kan andere elementen bevatten. Dat heet nesten. Het element eromheen is de ouder, de elementen erin zijn de kinderen.

Zo groeit er een boom: <main> bevat een kop en een lijst, en de lijst bevat de smaken. Een lijst met bolletjes is <ul>, elk punt erin een <li>. Een <li> hoort altijd in een lijst: het is een kind van <ul>.

Een element loopt tot aan zijn sluittag. Wat het laatst opengaat, sluit dus als eerste: eerst </li>, dan </ul>, dan </main>.

Inspringen in je code maakt de boom zichtbaar. De browser kijkt er niet naar, jij wel.

Onder de pagina staat de boom zoals de browser hem ziet: elk element ingesprongen onder zijn ouder.

index.html

1<main>2  <h2>Onze smaken</h2>3  <ul>4    <li>Vanille</li>5    <li>Pistache</li>6    <li>Aardbei</li>7  </ul>8</main>

ijssalon.example

Probeer het zelf

Zet onder de titel een hoofdstuk Bekers met daaronder een lijst van de maten Klein, Middel en Groot.

1<main>2  <h1>De Koude Kant</h1>3</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

Elementen in elementen

Een element kan andere elementen bevatten. Dat heet nesten. Het element eromheen is de ouder, de elementen erin zijn de kinderen.

Een element loopt tot aan zijn sluittag. Wat het laatst opengaat, sluit dus als eerste: eerst </li>, dan </ul>, dan </main>.

Inspringen in je code maakt de boom zichtbaar. De browser kijkt er niet naar, jij wel.

Onder de pagina staat de boom zoals de browser hem ziet: elk element ingesprongen onder zijn ouder.

index.html

1<main>2  <h2>Onze smaken</h2>3  <ul>4    <li>Vanille</li>5    <li>Pistache</li>6    <li>Aardbei</li>7  </ul>8</main>

ijssalon.example

Probeer het zelf

Zet onder de titel een hoofdstuk Bekers met daaronder een lijst van de maten Klein, Middel en Groot.

1<main>2  <h1>De Koude Kant</h1>3</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