HTML <meta> -tag
Voorbeeld
Beschrijf metadata binnen een HTML-document:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta
name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <meta>tag definieert metadata over een HTML-document. Metadata is data (informatie) over data.
<meta>tags gaan altijd binnen het <head>-element en worden meestal gebruikt om de tekenset, paginabeschrijving, trefwoorden, auteur van het document en viewport-instellingen op te geven.
Metadata wordt niet weergegeven op de pagina, maar is machinaal te parseren.
Metadata wordt gebruikt door browsers (hoe inhoud weer te geven of pagina opnieuw te laden), zoekmachines (trefwoorden) en andere webservices.
Er is een methode om webdesigners de controle te laten krijgen over de viewport (het zichtbare gedeelte van een webpagina voor de gebruiker), via de <meta>tag (zie het voorbeeld "De viewport instellen" hieronder).
Browserondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <meta> | Yes | Yes | Yes | Yes | Yes |
attributen
| Attribute | Value | Description |
|---|---|---|
| charset | character_set | Specifies the character encoding for the HTML document |
| content | text | Specifies the value associated with the http-equiv or name attribute |
| http-equiv | content-security-policy content-type default-style refresh |
Provides an HTTP header for the information/value of the content attribute |
| name | application-name author description generator keywords viewport |
Specifies a name for the metadata |
Algemene kenmerken
De <meta>tag ondersteunt ook de Global Attributes in HTML .
Meer voorbeelden
Definieer trefwoorden voor zoekmachines:
<meta name="keywords" content="HTML, CSS, JavaScript">
Definieer een beschrijving van uw webpagina:
<meta name="description" content="Free Web tutorials for
HTML and CSS">
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">
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.
U kunt meer lezen over de viewport in onze Responsive Web Design - The Viewport Tutorial .
Gerelateerde pagina's
HTML-zelfstudie: HTML-kop
HTML DOM-referentie: Meta-object
Standaard CSS-instellingen
Geen.