6. HTML-opbouw webpagina

De HTML-code van een webpagina is ingedeeld in een head en een body. De head bevat alle meta-informatie. De body bevat de content die zichtbaar is in de webpagina. Alle teksten, afbeeldingen en filmpjes staan dus in het body-deel van de pagina.

Omslag van ''

6.1 Basisopbouw webpagina

De HTML-code begint en sluit met het HTML-element:

<html>
[...]
</html>

Daartussen staan 2 delen:

  1. head-gedeelte met de meta-informatie
  2. body-gedeelte met alle content

Deze delen hebben ook hun eigen element. De opbouw is als volgt:

<html>
<head>
[allerlei meta-informatie]
</head>
<body>
[de content van de pagina]
</body>
</html>

Voor het html-element staat nog de zogenaamde DOCTYPE-declaratie. Daarin staat aangegeven welke HTML-versie de website gebruikt. Voor HTML5 is dat:

<!DOCTYPE html>

Het html-element bevat ook de taalkeuze van de pagina ('lang'), bijvoorbeeld voor een Nederlandstalige site is dat 'nl':

<html lang="nl">

6.2 Head-gedeelte

In de head-sectie staat onder ander het volgende:

  • title-element: deze bevat de titel van de pagina en is bij de meeste browsers zichtbaar in de browserbalk
  • metatags, zoals description
  • links naar de CSS-bestanden
  • links naar JavaScript-bestanden

Title-element

Een bijzonder HTML-element is de title. Deze bevat de titel van de pagina. Een goede opbouw van de title is:

titel content – naam organisatie

De naam van de organisatie kun je ook weglaten:

titel content

In HTML-code ziet er dan bijvoorbeeld als volgt uit:

<title>Opleiding Online Professional – The Internet Academy</title>

Het is meta-informatie: de title is geen onderdeel van de content van de pagina, maar wordt getoond in de browserbalk. In de afbeelding hieronder is dit met een paars kader aangegeven.

Title-element, zichtbaar in de browserbalk

Dit is ook altijd zo de bedoeling geweest toen HTML voor het eerst werd ontwikkeld door Tim Berners-Lee. In zijn lijst van de 1e HTML-tags staat het volgende over de titel-tag:

The title is not strictly part of the text of the document, but is an attribute of the node. It may not contain anchors, paragraph marks, or highlighting. The title may be used to identify the node in a history list, to label the window displaying the node, etc. It is not normally displayed in the text of a document itself. Contrast titles with headings.

De oorspronkelijke betekenis was dus om het venster te voorzien van een label, deze functie is nog steeds dezelfde.

Google gebruikt de titel ook vaak bij het tonen van het zoekresultaat. Om die reden is het ook heel belangrijk dat de titel betekenisvol is en uniek binnen de site. Het is onwenselijk dat 2 verschillende pagina's exact dezelfde titel hebben, want voor Google is het dan onduidelijk welke pagina bij welke titel hoort.

Niet goed is om de title te gebruiken om een heel broodkruimelpad in te plaatsen, zoals in het voorbeeld hieronder:

Kwijtschelding aanvragen - Alle producten en diensten - Inwoners Achtkarspelen - Gemeente Achtkarspelen

Metatags

In het head-gedeelte staan vaak metatags. De bekendste metatags zijn:

  • description: beschrijving van de pagina
  • keywords: trefwoorden van de pagina
  • robots: instructies of zoekmachines de pagina moeten indexeren

De metatags zijn oorspronkelijk ontwikkeld om meta-informatie over een pagina mee te geven. Geleidelijk aan werden ze steeds meer misbruikt en sommige metatags hebben zo hun waarde verloren.

Metatag description

In code ziet deze er bijvoorbeeld als volgt uit:

<meta name="description" content="The Internet Academy verzorgt cursussen, opleidingen en workshops over allerhande internet-gerelateerde onderwerpen, zoals usability, vindbaarheid, online statistieken en toegankelijkheid van websites.">

In de metatag description hoort een adequate en korte beschrijving van jouw site te staan. De belangrijkste informatie moet staan in de 1e 160 tekens, want dat is de lengte van de snippet die Google toont bij een zoekresultaat. Deze metatag is niet belangrijk voor de vindbaarheid, maar wel belangrijk voor de zichtbaarheid van jouw site, want zoekmachines presenteren de inhoud van deze tag soms bij de zoekresultaten. Een goede, betekenisvolle description-tag kan zo helpen dat mensen vaker op jouw pagina in de zoekresultaten klikken.

Metatag keywords

Een voorbeeld van de metatag keywords is:

<meta name="keywords" content="internet trainingen, cursussen, opleiding, opleidingen, schrijven voor het web, webmanager, basisopleiding webmanager">

De metatag keywords was bedoeld om de belangrijkste trefwoorden van je site in te plaatsen. Maar omdat deze tag vaak misbruikt werd om hoger te komen in de zoekresultaten, maken zoekmachines er geen gebruik meer van. Gebruik deze dus liever niet.

Metatag robots

Deze tag gebruik je als je wil dat een zoekmachine iets niet doet. Hieronder een voorbeeld van de code.

<meta name="robots" content="noindex, nofollow">

In dit voorbeeld is de wens dat zoekmachines de pagina NIET indexeren (noindex) en de links in de pagina NIET volgen (nofollow).

De metatag robots geeft onder andere de volgende informatie aan zoekmachines:

  • Indexeer deze pagina wel of niet.
  • Volg wel of niet de links op deze pagina.

Als je wilt dat de pagina gewoon geïndexeerd wordt en dat links in de pagina gewoon gevolgd worden, dan kun je de tag weglaten.

Een andere manier om zoekmachines te informeren over jouw pagina's is het gebruik van het bestand robots.txt. Deze bespreken we in het volgende hoofdstuk.

Er zijn 2 belangrijke verschillen tussen de metatag robots en het bestand robots.txt:

  1. robots.txt gebruik je voor volledige directories. De metatag robots geeft alleen informatie over de pagina waar de tag in staat.
  2. Pagina's van een directory die via de robots.txt uitgesloten zijn, kunnen toch door Google geïndexeerd worden, als er naar de pagina's wordt gelinkt. Staat er een metatag robots die aangeeft dat de pagina niet geïndexeerd mag worden, dan gebeurt dat ook niet.

Wil je dus dat een pagina niet geïndexeerd wordt, geef dit dan aan met de metatag robots.

Het nadeel van zo'n metatag is dat je deze op elke pagina moet toevoegen die je niet wilt indexeren. Wil je het voor je hele site of een hele directory dan kan het handig zijn om de HTTP-header X-Robots-Tag te gebruiken.

Links naar bestanden

In het head-gedeelte staan ook een aantal links naar bestanden. Bij het opvragen van de pagina worden deze bestanden ook opgehaald. Het zijn onder andere links naar:

  • CSS-bestanden, bijvoorbeeld: <link rel="stylesheet" href="/styles/screen.css" media="all">
  • JavaScript-bestanden, bijvoorbeeld: <script src="/scripts/jquery-1.7.js"></script>

6.3 Body-gedeelte

Na het head-gedeelte van de webpagina krijg je het body-deel. Dit is omsloten met het element body:

<body>
[content]
</body>

In het body-deel staat al je content: teksten, afbeeldingen, video's enzovoort.

Wat vind je van dit hoofdstuk?

Naar boven