De opbouw van een HTML-document

Ieder HTML-document heeft een basisopbouw dit altijd hetzelfde is. Deze opbouw zorgt er voor dat je webpagina goed kan worden weergegeven in de browser en geeft de aanknopingspunten om later CSS, een favicon, JavaScript etc. toe te voegen.

Doctype

Helemaal bovenaan je HTML-document komt het doctype. Dit is één regel die wat lijkt op een HTML-tag maar er geen is. Het doctype zorgt er voor dat de browser weet welke versie van HTML jij gebruikt hebt, zodat verschillen tussen de versies van HTML op de juiste manier door de browser verwerkt kunnen worden. Het doctype voor HTML 5 is als volgt:

<!DOCTYPE html>

Als je het doctype weg laat, gaat de browser over zogeheten quirksmode. Dit wil zeggen dat de browser gaat doen alsof het 1999 is en naar het beste van z'n kunnen een website die voor Internet Explorer 5 is gemaakt zo goed mogelijk weer te geven. Alleen is jouw website hopelijk niet voor Internet Explorer 5 gemaakt en kan iets wat jij met zorg in elkaar hebt gezet alsnog verkeerd worden weergegeven als het doctype ontbreekt. HTML 5 en Internet Explorer 5 hebben niks met elkaar te maken; sterker nog moderne HTML 5 websites kunnen door het antieke Internet Explorer 5 niet goed worden weergegeven.

html, head en body

Aan de basis van ieder HTML-document staan drie elementen: <html>, <head> en <body>. <html> is het alles omvattende element: dit komt direct na het doctype en de rest van het document komt in het element <html>. Binnen <html> komt er vervolgens een onderverdeling met twee elementen: <head> en <body>. Het element <head> dient voor onderdelen die niet op de webpagina zelf worden weergegeven. En het element <body> dient voor de daadwerkelijke inhoud van de webpagina. Samen met het doctype ziet dit er dan als volgt uit:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        
    </body>
</html>

De drie elementen <html>, <head> en <body> hebben geen verplichte attributen. In sommige gevallen kunnen ze wel attributen hebben, maar dat is voor nu niet zo interessant. <html> heeft wel een inhoud, namelijk de elementen <head> en <body> (in die volgorde). Er komen geen andere elementen direct in <html>, die vallen namelijk altijd binnen <head> of <body>. <head> heeft een verplichte inhoud waar we in de volgende paragraaf op komen. En <body> heeft soort van verplichte inhoud omdat je anders niet verder komt dan een lege pagina. Maar dat mag dus wel als je dat wil.

Tabbladtitel

Zoals in de vorige paragraaf genoemd heeft het element <head> een verplichte inhoud. Dit is het element <title> dat gebruikt wordt om de titel van de webpagina op te geven zoals deze getoond wordt in het browsertabblad van de webpagina. Of in de titelbalk van het venster als een browser zonder tabbladen wordt gebruikt. <title> heeft een verplichte eindtag en de inhoud is platte tekst. Binnen het element <head> ziet dit er als volgt uit:

<head>
    <title>HTMLboek - De opbouw van een HTML-document</title>
</head>

De titel bestaat meestal uit een combinatie van de naam van de website en de naam van de pagina, gescheiden door een streepje of iets dergelijks. De volgorde wil nog wel eens wisselen per website. Wikipedia doet bijvoorbeeld eerst de naam van de pagina gevolgd door de naam van de website. Dit is handig, omdat je wel eens meerdere tabbladen van Wikipedia open zou kunnen hebben staan. Als die dan allemaal met Wikipedia zouden beginnen en de rest zou wegvallen omdat de tabbladen te smal zijn, heb je daar als gebruiker niet zo veel aan. Voor HTMLboek is gekozen om te beginnen met de naam van de website en dan pas de naam van de pagina. In de meeste gevallen zul je maar één tabblad met HTMLboek open hebben staan en de hoofdstuktitels op zichzelf zeggen niet altijd genoeg. Bekijk dus voor je eigen website wat het meest logisch is.

Karakterset

Wanneer je speciale karakters gebruikt op je webpagina (denk aan letters met accenten en dergelijke), dan is het noodzakelijk om aan te geven welke karakterset je hiervoor hebt gebruikt. Aanbevolen is om in alle gevallen de UTF-8 karakterset te gebruiken. En dit geef je vervolgens op met het element <meta> dat in de <head> geplaatst wordt. Met <meta> alleen zijn we er niet, want hieraan moeten we het attribuut charset toevoegen met de waarde utf-8. Daarbij moet het element ook nog eens binnen de eerste 1024 bytes van het bestand staan, waardoor het zinvol is om het direct na de openingstag <head> te plaatsen. Dat klinkt ingewikkeld, maar valt eigenlijk wel mee als je het compleet ziet:

<head>
    <meta charset="utf-8">
    <title>HTMLboek - De opbouw van een HTML-document</title>
</head>

Als je dat hebt toegevoegd, moet je daarnaast ook nog zorgen dat het HTML-bestand ook daadwerkelijk in UTF-8 codering wordt opgeslagen (ook wel Unicode zonder BOM genoemd). Een moderne editor doet dit standaard, of laat je dat eenvoudig instellen.

Bestandsnamen

Je HTML-bestanden geef je de extensie .html. Door de extensie .html snapt de webserver automatisch dat het om een HTML-document gaat en presenteert deze dan op je juiste manier aan de webbrowser van de bezoekers van je website. Soms kom je ook nog wel eens de extensie .htm tegen. Deze komt uit het DOS-tijdperk toen bestandsextensies nog uit maar drie tekens mochten bestaan. Tegenwoordig is dat niet meer aan de orde en wordt eigenlijk altijd .html gebruikt. Maar .htm werkt ook nog gewoon.

Er is één speciale bestandsnaam: index.html. Het HTML-document met deze naam wordt automatisch geopend wanneer de bezoekers van je website alleen je domeinnaam in de adresbalk van de browser invoeren. Dus als iemand bijvoorbeeld www.htmlboek.net in de adresbalk invoert, wordt op de achtergrond automatisch het bestand index.html gepresenteerd. De voorpagina van je website sla je dus op als index.html. Heb je geen index.html, dan wordt door de meeste webservers een lijst met de bestanden op de server gepresenteerd; gewoonlijk niet iets wat je wil als voorpagina van je website.

Hoe weet ik of mijn HTML klopt?

Een foutje is snel gemaakt. Een vergeten eindtag, een aanhalingsteken gemist bij een attribuut, of wat je ook maar verkeerd zou kunnen doen. Als je zo'n foutje over het hoofd ziet, kan het zomaar zijn dat je website er anders uit komt te zien dan je in gedachte had. En je hebt geen idee waar het door komt...

Geen nood. Het World Wide Web Consortium, de partij die de HTML specificatie beheert, heeft een online tool om je HTML op fouten te laten controleren: de W3C Markup Validation Service. Deze is te vinden op validator.w3.org. Als je website al online staat, kun je de URL van een pagina opgeven om deze te laten controleren. Staat je website nog niet online, dan kun je ook een HTML bestand uploaden of vanuit je editor kopiëren en plakken in een tekstveld. Vervolgens wordt aangegeven of je HTML in orde is of wat er nog mis gaat.

Wanneer je de editor Visual Studio Code gebruikt, overweeg dan de extensie HTMLHint. Deze geeft bepaalde fouten in de structuur van je HTML-document aan terwijl je het aan het maken bent, waardoor je je website minder vaak door de W3C Validator hoeft laten testen.

Samengevat

In dit hoofdstuk hebben we kennis gemaakt met het doctype en zijn we vier elementen tegen gekomen die standaard onderdeel zijn van iedere HTML-pagina: <html>, <head>, <body> en <title>. Hieronder nog een keer op de juiste manier bij elkaar:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Je kunt bovenstaand kopiëren en gebruiken als basis voor ieder nieuw HTML-document. Voor de beginpagina van je website sla je het HTML-document op als index.html

Blij met HTMLboek?
Overweeg een donatie!
»Klik hier voor info«

Blij met HTMLboek?
Overweeg een donatie!
»Klik hier voor info«