Elke webpagina heeft de volgende structuur:
<html>
<body>
De eigenlijke inhoud van de website staat binnen het body-element.
Het head-element bevat aanwijzigen voor de browser
Deze webpagina gaat over de elementen in de head, nauwkeuriger geformuleerd: de elementen buiten de body.
Het !doctype element geeft aan de browser door dat het om een html-document gaat en en ook om welke html-versie het gaat.
Het element moet op de eerste regel van het html document staan.
Het element is leeg (geen eind-tag) en heeft de volgende vorm:
Het element head bundelt de aanwijzingen voor de browser.
Deze aanwijzingen zijn te vinden in de elementen link, meta, style en title binnen het element head.
Vorm:
Het element html omsluit het hele html-document. Alleen het element doctype staat vóór het element doctype.
Vorm:
Het element link defineert een link tussen het html-document en een extern hulpbestand. In de praktijk wordt het element alleen gebruikt als link naar het stijlblad.
Link is een leeg element, het heeft geen eind-tag </meta>.
Het element staat binnen de head.
Vorm:
De attributen hebben de volgende betekenis:
Er mogen verschillende elementen link in de head voorkomen, bijvoorbeeld om te linken naar verschillende stijlbladen.
Opmerking
Er is ook een attribuut type, bijvoorbeeld:
Dat betekent dat het bestand waarnaar gelinkt wordt uit tekst bestaat.
Het attribuut type is niet verplicht. Laat het weg.
Het element meta geeft informatie over het html-document door aan de browser.
Meta is een leeg element, het heeft geen eind-tag </meta>.
Het element staat binnen de head.
Het element wordt gebruikt met de attributen name en content.
Er zijn veel verschillende soorten informatie die het meta-element kan doorgeven, afhankelijk van de waarde van het attribuut name.
Deze regel zorgt ervoor dat een responsive website ook goed wordt getoond op een smart phone.
Laat je de regel weg dan wordt de webpagina veel te klein afgebeeld om die te kunnen lezen.
Meer hierover op de pagina over responsive webdesign, bij 'viewport'.
Met name="description" kan je een korte omschrijving geven van waar de website over gaat.
Zoekmachines geven de description door in de lijst zoekresultaten. Met de bovenstaande meta tag zou een zoekmachine iets kunnen tonen als
Bouw je eigen website | een gratis online cursus - nu volledig herzien
Met name="keywords" kan je een aantal trefwoorden opgeven. Als een gebruiker een of meer van die trefwoorden intikt in een zoekactie, zal de zoekmachine je website in de zoeklijst opnemen.
Zoekrobots van de verschillende zoek machines doorzoeken voortdurend het hele internet en zetten wat ze vinden in allerlei indexen.
Met name="robots" geef je aan dat je aanwijzingen hebt voor de zoekrobots.
In content kan je dan de volgende aanwijzingen geven: index of noindex; en follow of nofollow:
Een pagina die alleen voor bestuursleden of alleen voor leden bedoeld is kan je het best voorzien van een regel als in meta 4.. Daarbij worden dan ook de achteriggende paginas niet doorzocht.
Maar let op: dit is een verzoek aan de zoekrobots. Er is geen garantie dat de pagina niet geïndexeerd zal worden.
Er mogen verschillende elementen meta in de head voorkomen, bijvoorbeeld met verschillende name-attributen.
Het element style is bedoeld om stijlregels voor het html-document te definiëren.
Het element staat binnen de head.
Vorm:
Tussen de tags <style> en </style> worden de stijlregels net zo genoteerd als in een stijlblad. Het element style met de ingesloten regels wordt een stijlblok genoemd. De regels gelden alleen voor het document waarin het stijlblok is opgenomen.
Het element title definieert de titel van de webpagina.
Die titel wordt getoond op de tab of titelpagina van de browser en in de zoekmachine.
Het is van belang om elke pagina een korte, zinvolle titelte geven. Dat is duidelijk voor de gebruiker en het helpt zoekmachines om de pagina te vinden.
Het element staat binnen de head.
Vorm: