HTML <meta> tag

Definitie en gebruik

<meta> Het element definieert metadata over het HTML-document. Metadata is data over data (informatie).

<meta> Het element staat altijd in <head> element Binnen, meestal gebruikt om de tekenset, beschrijving van de pagina, zoekwoorden, auteur van het document en instellingen van de viewport te specificeren:

Metadata wordt niet weergegeven op de pagina, maar kan door machines worden geïnterpreteerd.

Browsers (hoe content wordt weergegeven of een pagina wordt herladen), zoekmachines (zoekwoorden) en andere netwerkdiensten gebruiken metadata.

Tip:Meta-elementen hebben verschillende toepassingen en er kunnen meerdere meta-elementen in een HTML-document voorkomen.

Tip:Door <meta> Er is een manier om webontwerpers te laten bepalen hoe de viewport (de gebied van de pagina die de gebruiker kan zien) wordt ingesteld (zie het voorbeeld "Viewport instellen" hieronder).

Opmerking:Elke meta-element kan alleen voor één doeleinde worden gebruikt. Als je meerdere eigenschappen wilt gebruiken, moet je meerdere meta-elementen toevoegen aan het head-element.

Zie ook:

HTML handleiding:HTML kop

HTML DOM referentiehandleiding:Meta object

Voorbeeld

<head>
  2: Verklaren characterencoding
  <meta name="description" content="Gratis webcursus">
  De meta-element kan metadata definiëren met behulp van naam/waarde paren, hiervoor zijn de name- en content-eigenschappen nodig.
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Probeer het zelf uit

Eigenschap

Eigenschap Waarde Beschrijving
charset Tekenset Definieert de tekenset van de HTML-document.
content Tekst Definieert de waarde die gekoppeld is aan de http-equiv of name-eigenschap.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 default-style
refresh
  • Bied HTTP headers voor de informatie/waarde van de content-eigenschap.
  • name
  • application-name
  • author
  • description
  • generator
 keywords

viewport

<meta> defineert de naam van de metadata. globale eigenschappenDe tag ondersteunt ook

Globale eigenschappen in HTML

  1. .
  2. De meta-element heeft drie typische toepassingen:
  3. Specificeer naam/waarde metadata paren

Verklaren characterencoding

Simuleer HTTP header velden

1: Specificeer verschillende naam/waarde metadata paren

De meta-element kan metadata definiëren met behulp van naam/waarde paren, hiervoor zijn de name- en content-eigenschappen nodig.

Definieer zoekwoorden voor zoekmachines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Definieer een beschrijving van de webpagina:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Definieer de auteur van de pagina:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="author" content="John Doe">

Stel de viewport in om de weergave van de website op verschillende apparaten te verbeteren:

2: Verklaren characterencoding

Gebruik de charset-eigenschap om de UTF-8 characterencoding van de pagina te verklaren:

<meta charset="UTF-8">

3: Simuleer HTTP header velden

Gebruik de http-equiv-eigenschap en de content-eigenschap om de document te vernieuwen elke 30 seconden:

<meta http-equiv="refresh" content="30">

De veranderingen in HTML5:

De charset-eigenschap is nieuw toegevoegd in HTML5.

De http-equiv-eigenschap in HTML4 kan meerdere verschillende waarden hebben, terwijl in HTML5 alleen de hier genoemde waarden kunnen worden gebruikt.

De scheme-eigenschap in HTML4 wordt niet meer gebruikt in HTML5.

Daarnaast wordt de meta-element niet meer gebruikt om de taal van de webpagina te specificeren. <meta> HTML5 introduceerde een methode die webontwikkelaars mogelijk maakt om de viewport in te stellen:

U moet deze tag op alle webpagina's opnemen om de viewport te controleren: <meta> Viewport element:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It provides instructions to the browser on how to control the page size and scaling ratio.

width=device-width Some settings set the width of the page to follow the screen width of the device (depending on the device).

When the browser first loads the page,initial-scale=1.0 Some settings for the initial zoom level.

Below are examples of web pages without viewport meta tags, as well as web pages with viewport meta tags:

Tip:If you are browsing this page on a mobile phone or tablet, you can click on the two links below to view the differences.



Without viewport meta tag


With viewport meta tag

Default CSS Settings

None.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support