Studieanker

# Opbouw van een HTML-document

# Basisskelet

Hoewel je tot nu toe HTML elementen hebt opgenomen in een document zonder al te veel moeite, bestaat een geldig HTML-document uit een aantal omkaderende en informatieve elementen die je tot nu toe hebt weggelaten. De browser trekt zijn plan en interpreteert "ongeldige" HTML-documenten zo goed mogelijk, maar om verder te gaan moet je toch het basisskelet van een geldig HTML-document leren kennen.

Maak een nieuw bestand met naam basisskelet.html. Om snel code te genereren via Visual Studio Code kan je gebruik maken van Emmet, een ingebouwd systeem voor het sneller typen van code. Om bijvoorbeeld een compleet basisskelet automatisch te genereren typ je een ! gevolgd door de Enter of Tab toets.

Het resultaat is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

Je moet van de bovenstaande code slechts drie elementen kennen: <html>, <head> en <body>.

# <html>

HTML is het root-element van de elementen-boom. Alle andere HTML-elementen moeten kindelementen van het <html> element zijn. Kindelementen zijn elementen die genest zijn binnen andere elementen. Met andere woorden, elementen die tussen de openings- en sluitingstag van andere elementen staan. Men formatteert code zo dat kindelementen één tab verder naar rechts staan om de structuur duidelijk te maken.

Binnen het <head> element bevinden zich elementen die niets tonen aan de gebruiker, maar wel informatie verschaffen aan de browser. Het skelet bevat al de nodige kindelementen van het <head> element. Je wil wel de inhoud van het <title> element aanpassen naar de titel van jouw pagina. Deze titel ziet men terug als titel van het tabblad en als standaardnaam wanneer iemand jouw pagina aan de favorieten wil toevoegen.

Pas in basisskelet.html de titel aan:

<title>Basisskelet HTML</title>

# <body>

Binnen het <body> element komen alle elementen die de gebruiker ziet en de structuur bepalen van hetgeen de browser op het scherm tekent.

Om de pagina af te maken voeg je een kop en paragraaf toe aan het bestand basisskelet.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Basisskelet HTML</title>
</head>
<body>
    <h1>Een geldige HTML-pagina</h1>
    <p>Het skelet werd gegenereerd door Emmet.</p>
</body>
</html>

← Oefeningen elementen en tags →