HTML en CSS leren: Lijsten

Lijsten

Hilde schrijft alles in lange zinnen: "Vul eerst het formulier in, kom dan kennismaken en breng je identiteitskaart en een draagmand mee." Op een gsm leest niemand dat uit. Lijsten maken het overzichtelijk.

Met of zonder nummers

In module 1 maakte je al een lijst met bolletjes: <ul>, van "unordered list". Elk punt is een <li>.

Telt de volgorde, zoals bij stappen of een top drie, dan neem je <ol>, een "ordered list". De browser nummert de punten zelf: schuif je er een stap tussen, dan schuiven de nummers mee.

Het verschil zit niet alleen in de bolletjes. Een voorleesprogramma zegt "lijst, drie items", en bij een <ol> ook bij welk nummer je bent.

index.html

1<main>2  <h2>Wat breng je mee?</h2>3  <ul>4    <li>Je identiteitskaart</li>5    <li>Een draagmand of een leiband</li>6  </ul>7  <h2>Zo adopteer je</h2>8  <ol>9    <li>Vul het adoptieformulier in.</li>10    <li>Kom kennismaken met je dier.</li>11    <li>Neem je nieuwe huisgenoot mee naar huis.</li>12  </ol>13</main>

asiel.example

Een lijst in een lijst

Een <li> kan meer bevatten dan tekst, ook een hele lijst. Zo maak je een geneste lijst: onder Honden de namen van de honden, onder Katten die van de katten.

De binnenste lijst staat in de <li>: na de tekst en vóór </li>. Zo hoort ze bij dat punt.

In de boom onder de pagina zie je het: de tweede <ul> is een kind van een <li>, niet van de eerste <ul>.

index.html

1<main>2  <h2>Zoekt een thuis</h2>3  <ul>4    <li>Honden5      <ul>6        <li>Rex</li>7        <li>Bella</li>8      </ul>9    </li>10    <li>Katten11      <ul>12        <li>Minou</li>13        <li>Felix</li>14      </ul>15    </li>16  </ul>17</main>

asiel.example

Probeer het zelf

Zet onder de kop drie genummerde stappen: Vul het formulier in., Kom kennismaken. en Neem je dier mee. Zet bij de tweede stap een lijst met bolletjes: je identiteitskaart en een draagmand.

1<main>2  <h2>Zo adopteer je</h2>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.kaart {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.kaart h3 {51  margin: 4px 0;52}53.kader {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.ras {59  color: #b5541c;60}61.dicht {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.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

Met of zonder nummers

In module 1 maakte je al een lijst met bolletjes: <ul>, van "unordered list". Elk punt is een <li>.

Telt de volgorde, zoals bij stappen of een top drie, dan neem je <ol>, een "ordered list". De browser nummert de punten zelf: schuif je er een stap tussen, dan schuiven de nummers mee.

Het verschil zit niet alleen in de bolletjes. Een voorleesprogramma zegt "lijst, drie items", en bij een <ol> ook bij welk nummer je bent.

index.html

1<main>2  <h2>Wat breng je mee?</h2>3  <ul>4    <li>Je identiteitskaart</li>5    <li>Een draagmand of een leiband</li>6  </ul>7  <h2>Zo adopteer je</h2>8  <ol>9    <li>Vul het adoptieformulier in.</li>10    <li>Kom kennismaken met je dier.</li>11    <li>Neem je nieuwe huisgenoot mee naar huis.</li>12  </ol>13</main>

asiel.example

Een lijst in een lijst

Een <li> kan meer bevatten dan tekst, ook een hele lijst. Zo maak je een geneste lijst: onder Honden de namen van de honden, onder Katten die van de katten.

De binnenste lijst staat in de <li>: na de tekst en vóór </li>. Zo hoort ze bij dat punt.

In de boom onder de pagina zie je het: de tweede <ul> is een kind van een <li>, niet van de eerste <ul>.

index.html

1<main>2  <h2>Zoekt een thuis</h2>3  <ul>4    <li>Honden5      <ul>6        <li>Rex</li>7        <li>Bella</li>8      </ul>9    </li>10    <li>Katten11      <ul>12        <li>Minou</li>13        <li>Felix</li>14      </ul>15    </li>16  </ul>17</main>

asiel.example

Probeer het zelf

1<main>2  <h2>Zo adopteer je</h2>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.kaart {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.kaart h3 {51  margin: 4px 0;52}53.kader {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.ras {59  color: #b5541c;60}61.dicht {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example