Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Uitleg van de HTML-Documentstructuur | HTML-Grondbeginselen
HTML-Essentials

bookUitleg van de HTML-Documentstructuur

Allereerst verkennen we de structuur van een HTML-document.

HTML-documentstructuur

Elk HTML-document moet voldoen aan een consistente structuur. De hier beschreven elementen vormen de basis voor het organiseren van inhoud, het definiëren van de paginastuctuur en het verbeteren van de gebruikerservaring op het web.

html-tag

De <html>-tag is het hoofdelement van een HTML-document. Alle andere elementen worden hierin geplaatst. De openingstag <html> markeert het begin van het HTML-document, terwijl de sluitingstag </html> het einde aangeeft.
Voorbeeld:

<html>
  <!-- Other elements go here -->
</html>

head-tag

De <head>-tag bevat meta-informatie over het HTML-document, zoals titel, tekenencodering en externe bronnen zoals stylesheets en scripts. Deze tag bevat geen inhoud die direct zichtbaar is voor de gebruiker op de webpagina.
Voorbeeld:

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Toelichting:

  • De <title>-tag definieert de titel van een webpagina. Deze wordt weergegeven in de titelbalk van de webbrowser of in het browsertabblad. De titel van een pagina geeft een kort overzicht van de inhoud, waardoor gebruikers het doel van de pagina beter begrijpen en efficiënter door meerdere tabbladen kunnen navigeren;
  • <meta charset="UTF-8"> is verantwoordelijk voor het specificeren van de tekenencodering die in een HTML-document wordt gebruikt. Deze tekenencodering bepaalt hoe webbrowsers tekst interpreteren en weergeven;
  • Enkele veelvoorkomende meta-tags zijn:
    • <meta name="description" content="Brief description of the page">: Biedt een beknopte beschrijving van de inhoud van de pagina, die mogelijk wordt weergegeven in zoekmachineresultaten;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Geeft relevante trefwoorden voor de inhoud van de pagina op, wat helpt bij het verbeteren van zoekmachineoptimalisatie (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Definieert de viewport-instellingen voor responsief ontwerp, zodat de schaal op verschillende apparaten correct is.

body-tag

De <body>-tag bevat de hoofdinhoud die zichtbaar is voor gebruikers op een webpagina. Deze inhoud bestaat uit tekst, afbeeldingen, links, formulieren en andere elementen waarmee gebruikers kunnen interactieren tijdens het bezoeken van de website. In wezen bevat de <body>-tag wat gebruikers zien en waarmee ze interageren wanneer ze een website bezoeken.
Voorbeeld:

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Documenttypeverklaring

De documenttypeverklaring informeert de webbrowser over de gebruikte HTML-versie in het document. Deze verklaring zorgt ervoor dat de webbrowser het document correct weergeeft volgens de gespecificeerde HTML-standaard. Voor HTML5-documenten is de doctypeverklaring <!DOCTYPE html>.
Voorbeeld:

<!DOCTYPE html>

Resulterende structuur

Ter afsluiting verzamelen we alle elementen die we hebben besproken en combineren deze tot één HTML-document.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

Hieronder zie je hoe het HTML-document eruitziet in de webbrowser.

Videotutorial

1. Welke tag is het rootelement van een HTML-document?

2. Wat bevat de <head>-tag?

3. Wat definieert de <title>-tag?

4. Wat is het doel van de <body>-tag?

question mark

Welke tag is het rootelement van een HTML-document?

Select the correct answer

question mark

Wat bevat de <head>-tag?

Select the correct answer

question mark

Wat definieert de <title>-tag?

Select the correct answer

question mark

Wat is het doel van de <body>-tag?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 1

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 3.13

bookUitleg van de HTML-Documentstructuur

Veeg om het menu te tonen

Allereerst verkennen we de structuur van een HTML-document.

HTML-documentstructuur

Elk HTML-document moet voldoen aan een consistente structuur. De hier beschreven elementen vormen de basis voor het organiseren van inhoud, het definiëren van de paginastuctuur en het verbeteren van de gebruikerservaring op het web.

html-tag

De <html>-tag is het hoofdelement van een HTML-document. Alle andere elementen worden hierin geplaatst. De openingstag <html> markeert het begin van het HTML-document, terwijl de sluitingstag </html> het einde aangeeft.
Voorbeeld:

<html>
  <!-- Other elements go here -->
</html>

head-tag

De <head>-tag bevat meta-informatie over het HTML-document, zoals titel, tekenencodering en externe bronnen zoals stylesheets en scripts. Deze tag bevat geen inhoud die direct zichtbaar is voor de gebruiker op de webpagina.
Voorbeeld:

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Toelichting:

  • De <title>-tag definieert de titel van een webpagina. Deze wordt weergegeven in de titelbalk van de webbrowser of in het browsertabblad. De titel van een pagina geeft een kort overzicht van de inhoud, waardoor gebruikers het doel van de pagina beter begrijpen en efficiënter door meerdere tabbladen kunnen navigeren;
  • <meta charset="UTF-8"> is verantwoordelijk voor het specificeren van de tekenencodering die in een HTML-document wordt gebruikt. Deze tekenencodering bepaalt hoe webbrowsers tekst interpreteren en weergeven;
  • Enkele veelvoorkomende meta-tags zijn:
    • <meta name="description" content="Brief description of the page">: Biedt een beknopte beschrijving van de inhoud van de pagina, die mogelijk wordt weergegeven in zoekmachineresultaten;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Geeft relevante trefwoorden voor de inhoud van de pagina op, wat helpt bij het verbeteren van zoekmachineoptimalisatie (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Definieert de viewport-instellingen voor responsief ontwerp, zodat de schaal op verschillende apparaten correct is.

body-tag

De <body>-tag bevat de hoofdinhoud die zichtbaar is voor gebruikers op een webpagina. Deze inhoud bestaat uit tekst, afbeeldingen, links, formulieren en andere elementen waarmee gebruikers kunnen interactieren tijdens het bezoeken van de website. In wezen bevat de <body>-tag wat gebruikers zien en waarmee ze interageren wanneer ze een website bezoeken.
Voorbeeld:

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Documenttypeverklaring

De documenttypeverklaring informeert de webbrowser over de gebruikte HTML-versie in het document. Deze verklaring zorgt ervoor dat de webbrowser het document correct weergeeft volgens de gespecificeerde HTML-standaard. Voor HTML5-documenten is de doctypeverklaring <!DOCTYPE html>.
Voorbeeld:

<!DOCTYPE html>

Resulterende structuur

Ter afsluiting verzamelen we alle elementen die we hebben besproken en combineren deze tot één HTML-document.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

Hieronder zie je hoe het HTML-document eruitziet in de webbrowser.

Videotutorial

1. Welke tag is het rootelement van een HTML-document?

2. Wat bevat de <head>-tag?

3. Wat definieert de <title>-tag?

4. Wat is het doel van de <body>-tag?

question mark

Welke tag is het rootelement van een HTML-document?

Select the correct answer

question mark

Wat bevat de <head>-tag?

Select the correct answer

question mark

Wat definieert de <title>-tag?

Select the correct answer

question mark

Wat is het doel van de <body>-tag?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 1
some-alt