HTML <meta> Tag

Definition und Verwendung

<meta> Der Tag definiert Metadaten über das HTML-Dokument. Metadaten sind Daten über Daten (Informationen).

<meta> Der Tag befindet sich immer <head> Element Innerhalb, wird normalerweise verwendet, um den Zeichensatz, Seitenbeschreibung, Keywords, Dokumentautor und Viewport-Einstellungen zu spezifizieren:

Metadaten werden nicht auf der Seite angezeigt, aber können von Maschinen verarbeitet werden.

Browser (wie Inhalte angezeigt oder Seiten neu geladen werden), Suchmaschinen (Schlüsselwörter) und andere Netzwerkdienste verwenden Metadaten.

Tipp:meta-Elemente haben verschiedene Anwendungen und können in einem HTML-Dokument mehrere meta-Elemente geben.

Tipp:Durch <meta> Es gibt eine Methode, mit der Web-Designer den Viewport (d.h. den Bereich, den der Benutzer im Dokument sehen kann) steuern können (siehe das nachstehende Beispiel "Viewport einstellen").

Beachten Sie:Jedes meta-Element kann nur für einen Zweck verwendet werden. Wenn mehrere Eigenschaften verwendet werden sollen, sollten mehrere meta-Elemente im head-Element hinzugefügt werden.

Weitere Informationen:

HTML教程：HTML Kopf

HTML DOM Referenzhandbuch:Meta-Objekt

Beispiel

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Kostenlose Web-Tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Versuchen Sie es selbst

Attribut

Attribut Wert Beschreibung
charset Zeichensatz Bestimmt die Zeichensatz编码 des HTML-Dokuments.
content Text Bestimmt den Wert, der mit den Attributen 'http-equiv' oder 'name' verbunden ist.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 bietet HTTP-Header für Informationen/Werte des content-Attributs.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 bestimmt den Namen der Metadaten.

globale Attribute

<meta> Der Tag unterstützt auch Globale Attribute im HTML.

Das meta-Element hat drei typische Anwendungen:

  1. Spezifizierung von Namen/Wert-Metadatenpaaren
  2. Erklärung der Zeichensatzkodierung
  3. Simulation von HTTP-Header-Feldern

1: Spezifizierung verschiedener Namen/Wert-Metadatenpaare

Das meta-Element kann Metadaten mit Namen/Wert-Paaren definieren, dazu müssen das name- und content-Attribut verwendet werden.

Definieren Sie Schlüsselwörter für Suchmaschinen:

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

Definieren Sie eine Beschreibung der Webseite:

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

Definieren Sie den Autor der Seite:

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

Setzen Sie den Viewport, um das Aussehen der Webseite auf verschiedenen Geräten zu verbessern:

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

2: Erklärung der Zeichensatzkodierung

Verwenden Sie das charset-Attribut, um die UTF-8-Zeichenkodierung dieser Seite zu erklären:

<meta charset="UTF-8">

3: Simulation von HTTP-Header-Feldern

Verwenden Sie das http-equiv-Attribut und das content-Attribut, um die Dokumentaktualisierung alle 30 Sekunden zu erzwingen:

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

Veränderungen in HTML5

Das charset-Attribut ist in HTML5 neu hinzugekommen.

Das http-equiv-Attribut in HTML4 kann mehrere verschiedene Werte haben. In HTML5 kann nur der in diesem Abschnitt erwähnte Wert verwendet werden.

Das scheme-Attribut in HTML4 wird in HTML5 nicht mehr verwendet.

Außerdem wird der meta-Element nicht mehr verwendet, um die Sprache der Webseite zu spezifizieren.

Viewport zu setzen

HTML5 hat eine Methode eingeführt, die es Web-Designern ermöglicht, durch <meta> Tags in allen Webseiten enthalten, um den Viewport zu steuern.

Sie sollten diese folgenden <meta> Viewport-Element:

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

Es gibt dem Browser Anweisungen darüber, wie die Größe und die Vergrößerung der Seite gesteuert werden soll.

width=device-width Einige Einstellungen stellen die Breite der Seite auf die Breite des Bildschirms des Geräts ein (je nach Gerät).

Wenn der Browser die Seite zum ersten Mal lädtinitial-scale=1.0 Einige Einstellungen für die Anfangsvergrößerung.

Nachstehend sind Beispiele für Webseiten mit und ohne viewport meta Tag aufgeführt:

Tipp:Wenn Sie diese Seite mit einem Handy oder Tabletcomputer betrachten, können Sie auf die beiden folgenden Links klicken, um die Unterschiede zu sehen.



Ohne viewport-Meta-Tag


Mit viewport-Meta-Tag

Standardmäßige CSS-Einstellungen

Keine.

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung