HTML en CSS leren: Geldige HTML

Attributen en geldige HTML

De browser vergeeft veel: een vergeten aanhalingsteken, een id die twee keer voorkomt. Maar wie vergeeft, moet raden. Op Hildes site raadde hij verkeerd, en nu springt de link naar de katten naar de honden.

De regels van een attribuut

Een attribuut staat in de openingstag: een naam, een = en een waarde tussen aanhalingstekens, zoals alt="Minou, een grijze kat". Tussen twee attributen staat een spatie.

Zonder aanhalingstekens stopt de waarde bij de eerste spatie: alt=Minou slaapt geeft als alt alleen Minou. De rest leest de browser als nieuwe, onbekende attributen.

Elk attribuut komt maar één keer voor in een tag. Staat het er twee keer, dan telt alleen het eerste.

index.html

1<main>2  <img src="kat.svg" alt="Minou, een grijze kat" width="96" height="96">3  <p>Minou zoekt een thuis.</p>4</main>

asiel.example

Tekens met een betekenis

Twee tekens betekenen iets in HTML. Een < gevolgd door een letter begint een tag: in kat<hond verdwijnt alles vanaf de < tot aan het volgende >.

En een & begint een tekencode. < wordt <, en & wordt &. Volgt er na je & toevallig de naam van een code, dan zie je een heel ander teken: &copy wordt ©.

Schrijf ze daarom als code: Kat & Hond toont Kat & Hond, en 3 < 5 toont 3 < 5.

index.html

1<main>2  <h2>Met dank aan</h2>3  <p>Dierenvoeding Kat &amp; Hond uit Izegem, voor elke zak brokken.</p>4</main>

asiel.example

Een id is uniek

Een id is de naam van één element. Komt dezelfde id twee keer voor, dan is de HTML ongeldig, en kiest de browser bij twijfel het eerste.

Dat merk je bij een sprongetje: een link naar #adopteren springt naar het element met id="adopteren", op dezelfde pagina. Handig voor een lange pagina met een inhoudstafel bovenaan.

Heten twee hoofdstukken adopteren, dan springt de link altijd naar het eerste.

index.html

1<main>2  <p><a href="#adopteren">Hoe adopteer ik?</a></p>3  <section id="dieren">4    <h2>Zoekt een thuis</h2>5    <p>Rex, Bella en Minou.</p>6  </section>7  <section id="adopteren">8    <h2>Zo adopteer je</h2>9    <p>Vul het formulier in en kom langs.</p>10  </section>11</main>

asiel.example

Probeer het zelf

Maak van Hoe adopteer ik? een link die naar het hoofdstuk Zo adopteer je springt. Geef dat hoofdstuk daarvoor de id adopteren.

1<main>2  <p>Hoe adopteer ik?</p>3  <section>4    <h2>Zoekt een thuis</h2>5    <p>Rex, Bella en Minou.</p>6  </section>7  <section>8    <h2>Zo adopteer je</h2>9    <p>Vul het formulier in en kom langs.</p>10  </section>11</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

HTML en CSS leren: Geldige HTML

Attributen en geldige HTML

De regels van een attribuut

Een attribuut staat in de openingstag: een naam, een = en een waarde tussen aanhalingstekens, zoals alt="Minou, een grijze kat". Tussen twee attributen staat een spatie.

Zonder aanhalingstekens stopt de waarde bij de eerste spatie: alt=Minou slaapt geeft als alt alleen Minou. De rest leest de browser als nieuwe, onbekende attributen.

Elk attribuut komt maar één keer voor in een tag. Staat het er twee keer, dan telt alleen het eerste.

index.html

1<main>2  <img src="kat.svg" alt="Minou, een grijze kat" width="96" height="96">3  <p>Minou zoekt een thuis.</p>4</main>

asiel.example

Tekens met een betekenis

Twee tekens betekenen iets in HTML. Een < gevolgd door een letter begint een tag: in kat<hond verdwijnt alles vanaf de < tot aan het volgende >.

En een & begint een tekencode. < wordt <, en & wordt &. Volgt er na je & toevallig de naam van een code, dan zie je een heel ander teken: &copy wordt ©.

Schrijf ze daarom als code: Kat & Hond toont Kat & Hond, en 3 < 5 toont 3 < 5.

index.html

1<main>2  <h2>Met dank aan</h2>3  <p>Dierenvoeding Kat &amp; Hond uit Izegem, voor elke zak brokken.</p>4</main>

asiel.example

Een id is uniek

Een id is de naam van één element. Komt dezelfde id twee keer voor, dan is de HTML ongeldig, en kiest de browser bij twijfel het eerste.

Dat merk je bij een sprongetje: een link naar #adopteren springt naar het element met id="adopteren", op dezelfde pagina. Handig voor een lange pagina met een inhoudstafel bovenaan.

Heten twee hoofdstukken adopteren, dan springt de link altijd naar het eerste.

index.html

1<main>2  <p><a href="#adopteren">Hoe adopteer ik?</a></p>3  <section id="dieren">4    <h2>Zoekt een thuis</h2>5    <p>Rex, Bella en Minou.</p>6  </section>7  <section id="adopteren">8    <h2>Zo adopteer je</h2>9    <p>Vul het formulier in en kom langs.</p>10  </section>11</main>

asiel.example

Probeer het zelf

Maak van Hoe adopteer ik? een link die naar het hoofdstuk Zo adopteer je springt. Geef dat hoofdstuk daarvoor de id adopteren.

1<main>2  <p>Hoe adopteer ik?</p>3  <section>4    <h2>Zoekt een thuis</h2>5    <p>Rex, Bella en Minou.</p>6  </section>7  <section>8    <h2>Zo adopteer je</h2>9    <p>Vul het formulier in en kom langs.</p>10  </section>11</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