HTML en CSS leren: Elementen en tags

Wat HTML is

Marieke zet twee bolletjes vanille op de toonbank. "Eén voor jou, één voor mij. En nu: wat is dat HTML waar mijn neef het altijd over heeft?"

Tags en elementen

HTML is de taal waarmee je een browser vertelt wat elk stukje tekst is: een kop, een alinea, een lijst.

Dat doe je met tags: een woord tussen punthaken. <h1> is de openingstag van een grote kop, </h1> de sluittag. De schuine streep / maakt het verschil.

Openingstag, inhoud en sluittag samen heten een element. <h1>De Koude Kant</h1> is één element: een kop met de tekst De Koude Kant. <p> maakt op dezelfde manier een alinea, van "paragraph".

De tags zelf zie je niet op de pagina: ze zeggen alleen wat de tekst is. En <main>? Ook een element, een doos rond de hoofdinhoud. Daar kom je in les 3 op terug.

index.html

1<main>2  <h1>De Koude Kant</h1>3  <p>Het lekkerste ijs van de zeedijk.</p>4</main>

ijssalon.example

Het skelet van een pagina

Een volledige HTML-pagina heeft altijd hetzelfde skelet.

<!DOCTYPE html> bovenaan zegt: dit is moderne HTML. Daarna komt <html lang="nl">, met de taal van de pagina, zodat een voorleesprogramma de juiste uitspraak kiest.

In <head> staat informatie over de pagina, zoals de <title>: de naam in het tabblad en in de zoekresultaten van Google. Wat de bezoeker op de pagina ziet, staat in <body>.

Kijk hoe alles netjes in elkaar zit: <head> en <body> openen en sluiten allebei binnen <html>.

index.html

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>IJssalon De Koude Kant</title>5  </head>6  <body>7    <main>8      <h1>De Koude Kant</h1>9      <p>Het lekkerste ijs van de zeedijk.</p>10    </main>11  </body>12</html>

ijssalon.example

Probeer het zelf

Nu jij. Zet in <main> een kop <h1> met Welkom bij De Koude Kant en daaronder een alinea met Proef de zee in elk bolletje.

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>IJssalon De Koude Kant</title>5  </head>6  <body>7    <main>8 9    </main>10  </body>11</html>

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

Tags en elementen

HTML is de taal waarmee je een browser vertelt wat elk stukje tekst is: een kop, een alinea, een lijst.

Dat doe je met tags: een woord tussen punthaken. <h1> is de openingstag van een grote kop, </h1> de sluittag. De schuine streep / maakt het verschil.

Openingstag, inhoud en sluittag samen heten een element. <h1>De Koude Kant</h1> is één element: een kop met de tekst De Koude Kant. <p> maakt op dezelfde manier een alinea, van "paragraph".

De tags zelf zie je niet op de pagina: ze zeggen alleen wat de tekst is. En <main>? Ook een element, een doos rond de hoofdinhoud. Daar kom je in les 3 op terug.

index.html

1<main>2  <h1>De Koude Kant</h1>3  <p>Het lekkerste ijs van de zeedijk.</p>4</main>

ijssalon.example

Het skelet van een pagina

Een volledige HTML-pagina heeft altijd hetzelfde skelet.

<!DOCTYPE html> bovenaan zegt: dit is moderne HTML. Daarna komt <html lang="nl">, met de taal van de pagina, zodat een voorleesprogramma de juiste uitspraak kiest.

In <head> staat informatie over de pagina, zoals de <title>: de naam in het tabblad en in de zoekresultaten van Google. Wat de bezoeker op de pagina ziet, staat in <body>.

Kijk hoe alles netjes in elkaar zit: <head> en <body> openen en sluiten allebei binnen <html>.

index.html

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>IJssalon De Koude Kant</title>5  </head>6  <body>7    <main>8      <h1>De Koude Kant</h1>9      <p>Het lekkerste ijs van de zeedijk.</p>10    </main>11  </body>12</html>

ijssalon.example

Probeer het zelf

Nu jij. Zet in <main> een kop <h1> met Welkom bij De Koude Kant en daaronder een alinea met Proef de zee in elk bolletje.

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>IJssalon De Koude Kant</title>5  </head>6  <body>7    <main>8 9    </main>10  </body>11</html>

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