Web: Essentials

Appearance

HTML: structuur ​

Vaste structuur ​

Elke HTML pagina start van een vaste structuur.

html
<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
 
  <body>
  </body>
</html>

De doctype ​

html
<!DOCTYPE html>

Bovenaan de pagina vind je de doctype. Deze declaratie vertelt de webbrowser welke versie van HTML het document gebruikt.

Deze declaratie is niet een HTML-tag of element op zich, maar een instructie aan de browser over hoe het document moet worden geïnterpreteerd. Het is altijd de eerste regel in een HTML-document, vóór de <html>-tag.

Hier gebruiken we de huidige standaard voor HTML5.

Zonder een correcte DOCTYPE-declaratie kunnen sommige browsers terugvallen op "quirks-modus", wat kan leiden tot inconsistente weergave van je webpagina.

De HTML, head en body tags ​

html
<html lang="nl">
  <head>
    <!-- Metadata over het document komt hier -->
  </head>

  <body>
    <!-- De zichtbare inhoud van de pagina komt hier -->
  </body>
</html>

De <html>, <head> en <body> tags zijn de basis van je document.

  • <html>: Deze tag omsluit de volledige pagina. Hier wordt ook meestal een lang="nl" attribuut bijgeplaatst. Dit attribuut communiceert de taal van je pagina aan de browser. In dit voorbeeld is dit dus nederlands. De talen worden steeds in ISO formaat genoteerd.
  • <head>: Deze tag bevat de meta informatie van je pagina. Deze wordt niet getoond in het venster van je browser maar bevat extra informatie zoals de favicon, pagina titel, links naar je CSS stijlen ...
  • <body>: Deze tag bevat de zichtbare inhoud van je pagina.