HTML en CSS leren: Div en span

Div en span

Hilde wil de openingsuren in een gekleurd kader, en het woord "gesloten" in het rood. Er bestaat geen element dat "kader" of "rood" betekent. Daarvoor zijn er twee lege dozen.

Dozen zonder betekenis

Een <div> is een doos zonder betekenis. Je zet er andere elementen in om ze samen op te maken: een kader rond twee alinea's, met één class.

Een <span> doet hetzelfde binnen een regel tekst: een stukje dat een eigen stijl krijgt, zoals het woord gesloten.

Het verschil: een <div> begint op een nieuwe regel en neemt de hele breedte, een <span> blijft gewoon in de regel staan.

De CSS van het asiel geeft .kader een achtergrond en .dicht een rode kleur.

index.html

1<main>2  <h2>Openingsuren</h2>3  <div class="kader">4    <p>Woensdag en zaterdag open van 13 tot 17 uur.</p>5    <p>Op zondag zijn we <span class="dicht">gesloten</span>.</p>6  </div>7</main>

asiel.example

Liever een element met betekenis

Een <div> en een <span> zeggen niets over wat erin staat. Met CSS kan je een <div> laten lijken op een kop, maar een voorleesprogramma hoort dan gewone tekst, en Google ziet geen hoofdstukken.

Bestaat er een element dat zegt wat iets is, neem dan dat: <h2> voor een kop, <ul> voor een lijst, <nav> voor een menu, <strong> voor nadruk.

Een <div> of <span> is voor wat overblijft: een doos die er alleen is voor de CSS. Kijk in de boom: deze kop is helemaal geen kop.

index.html

1<link rel="stylesheet" href="style.css">2<main>3  <div class="titel">Onze katten</div>4  <div>Minou en Felix liggen het liefst in de zon.</div>5</main>

style.css

1.titel {2  margin-top: 16px;3  font-size: 1.5rem;4  font-weight: bold;5}

asiel.example

Probeer het zelf

Zet de twee alinea's samen in een <div class="kader">, en het woord gesloten in een <span class="dicht">.

1<main>2  <h2>Openingsuren</h2>3  <p>Woensdag en zaterdag open van 13 tot 17 uur.</p>4  <p>Op zondag zijn we gesloten.</p>5</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

Dozen zonder betekenis

Een <div> is een doos zonder betekenis. Je zet er andere elementen in om ze samen op te maken: een kader rond twee alinea's, met één class.

Een <span> doet hetzelfde binnen een regel tekst: een stukje dat een eigen stijl krijgt, zoals het woord gesloten.

Het verschil: een <div> begint op een nieuwe regel en neemt de hele breedte, een <span> blijft gewoon in de regel staan.

De CSS van het asiel geeft .kader een achtergrond en .dicht een rode kleur.

index.html

1<main>2  <h2>Openingsuren</h2>3  <div class="kader">4    <p>Woensdag en zaterdag open van 13 tot 17 uur.</p>5    <p>Op zondag zijn we <span class="dicht">gesloten</span>.</p>6  </div>7</main>

asiel.example

Liever een element met betekenis

Een <div> en een <span> zeggen niets over wat erin staat. Met CSS kan je een <div> laten lijken op een kop, maar een voorleesprogramma hoort dan gewone tekst, en Google ziet geen hoofdstukken.

Bestaat er een element dat zegt wat iets is, neem dan dat: <h2> voor een kop, <ul> voor een lijst, <nav> voor een menu, <strong> voor nadruk.

Een <div> of <span> is voor wat overblijft: een doos die er alleen is voor de CSS. Kijk in de boom: deze kop is helemaal geen kop.

index.html

1<link rel="stylesheet" href="style.css">2<main>3  <div class="titel">Onze katten</div>4  <div>Minou en Felix liggen het liefst in de zon.</div>5</main>

style.css

1.titel {2  margin-top: 16px;3  font-size: 1.5rem;4  font-weight: bold;5}

asiel.example

Probeer het zelf

Zet de twee alinea's samen in een <div class="kader">, en het woord gesloten in een <span class="dicht">.

1<main>2  <h2>Openingsuren</h2>3  <p>Woensdag en zaterdag open van 13 tot 17 uur.</p>4  <p>Op zondag zijn we gesloten.</p>5</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