HTML - Het hoofdelement
Het HTML- <head>element is een container voor de volgende elementen:
<title>, <style>,
<meta>, <link>, <script>, en <base>.
Het HTML <head>-element
Het <head>element is een container voor metadata (data over data) en wordt tussen de <html>tag en de <body>tag geplaatst.
HTML-metadata zijn gegevens over het HTML-document. Metagegevens worden niet weergegeven.
Metadata definiëren doorgaans de documenttitel, tekenset, stijlen, scripts en andere meta-informatie.
Het HTML <title>-element
Het <title>element definieert de titel van het document. De titel moet alleen tekst zijn en wordt weergegeven in de titelbalk van de browser of op het tabblad van de pagina.
Het <title>element is vereist in HTML-documenten!
De inhoud van een paginatitel is erg belangrijk voor zoekmachine optimalisatie (SEO)! De paginatitel wordt gebruikt door algoritmen van zoekmachines om de volgorde te bepalen bij het weergeven van pagina's in zoekresultaten.
Het <title>element:
- definieert een titel in de browserwerkbalk
- biedt een titel voor de pagina wanneer deze wordt toegevoegd aan favorieten
- geeft een titel voor de pagina weer in de resultaten van zoekmachines
Probeer dus de titel zo nauwkeurig en zinvol mogelijk te maken!
Een eenvoudig HTML-document:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Het HTML <style>-element
Het <style>element wordt gebruikt om stijlinformatie voor een enkele HTML-pagina te definiëren:
Voorbeeld
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Het HTML <link>-element
Het <link>element definieert de relatie tussen het huidige document en een externe bron.
De <link>
tag wordt meestal gebruikt om te linken naar externe stylesheets:
Voorbeeld
<link rel="stylesheet" href="mystyle.css">
Tip: ga naar onze CSS-zelfstudie voor meer informatie over CSS .
Het HTML <meta>-element
Het <meta>element wordt meestal gebruikt om de tekenset, paginabeschrijving, trefwoorden, auteur van het document en viewport-instellingen op te geven.
De metadata worden niet op de pagina weergegeven, maar worden gebruikt door browsers (hoe inhoud weer te geven of pagina opnieuw te laden), door zoekmachines (trefwoorden) en andere webservices.
Voorbeelden
Definieer de gebruikte tekenset:
<meta charset="UTF-8">
Definieer trefwoorden voor zoekmachines:
<meta name="keywords" content="HTML, CSS, JavaScript">
Definieer een beschrijving van uw webpagina:
<meta name="description" content="Free Web tutorials">
Definieer de auteur van een pagina:
<meta name="author" content="John Doe">
Vernieuw document elke 30 seconden:
<meta http-equiv="refresh" content="30">
De viewport instellen om uw website er op alle apparaten goed uit te laten zien:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Voorbeeld van <meta>tags:
Voorbeeld
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
Het kijkvenster instellen
De viewport is het zichtbare gedeelte van een webpagina voor de gebruiker. Het varieert met het apparaat - het zal kleiner zijn op een mobiele telefoon dan op een computerscherm.
U moet het volgende <meta>element in al uw webpagina's opnemen:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dit geeft de browser instructies over hoe de afmetingen en schaal van de pagina te bepalen.
Het width=device-widthonderdeel stelt de breedte van de pagina in om de schermbreedte van het apparaat te volgen (dit is afhankelijk van het apparaat).
Het initial-scale=1.0onderdeel stelt het initiële zoomniveau in wanneer de pagina voor het eerst door de browser wordt geladen.
Hier is een voorbeeld van een webpagina zonder de viewport-metatag en dezelfde webpagina met de viewport-metatag:
Tip: Als u deze pagina bekijkt met een telefoon of tablet, kunt u op de twee onderstaande links klikken om het verschil te zien.
Het HTML <script>-element
Het <script>element wordt gebruikt om client-side JavaScripts te definiëren.
Het volgende JavaScript schrijft "Hallo JavaScript!" in een HTML-element met id="demo":
Voorbeeld
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Tip: Ga voor meer informatie over JavaScript naar onze JavaScript-tutorial .
Het HTML <base>-element
Het <base>element specificeert de basis-URL en/of het doel voor alle relatieve URL's op een pagina.
De <base>tag moet een href of een target-attribuut bevatten, of beide.
Er kan maar één enkel <base>
element in een document zijn!
Voorbeeld
Geef een standaard-URL en een standaarddoel op voor alle links op een pagina:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Hoofdstuk samenvatting
- Het
<head>element is een container voor metadata (data over data) - Het
<head>element wordt tussen de<html>tag en de<body>tag geplaatst - Het
<title>element is vereist en definieert de titel van het document - Het
<style>element wordt gebruikt om stijlinformatie voor een enkel document te definiëren - De
<link>tag wordt meestal gebruikt om naar externe stylesheets te linken - Het
<meta>element wordt meestal gebruikt om de tekenset, paginabeschrijving, trefwoorden, auteur van het document en viewport-instellingen te specificeren - Het
<script>element wordt gebruikt om JavaScripts aan de clientzijde te definiëren - Het
<base>element specificeert de basis-URL en/of het doel voor alle relatieve URL's op een pagina
HTML-kopelementen
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .