HTML/Elemente/meta

Aus SELFHTML-Wiki
< HTML‎ | Elemente(Weitergeleitet von Meta viewport)
Wechseln zu: Navigation, Suche

Das meta-Element setzt, wenn das name-Attribut verwendet wird, zusätzliche Angaben und Informationen, die die Verwaltung des Dokumentes erleichtern und auch festlegen können, wie der Browser das Dokument anzeigt (die Metadaten zum Dokument).
Zusammen mit dem charset-Attribut teilt es dem Browser mit, welche Zeichencodierung der Server für das Dokument verwendet hat.
Drittens kann es mit dem http-equiv Attribut Werte für HTTP-Header ergänzen, die der Server nicht geliefert hat.
Viertens ist es mit dem itemprop-Attribut möglich, an beliebiger Stelle im Dokument ein Attribut für ein Microdatenelement festzulegen.

Syntax
Start-Tag: notwendig
End-Tag: verboten
WAI‑ARIA‑Rolle
  • keine
Elternelemente
Darf vorkommen in:
  • Immer im head-Element
  • Wenn das itemprop-Attribut verwendet wird: auch in Elementen mit phrasing content
erlaubte Inhalte
keine, leeres Element
Beispiel 
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="description" 
          content="Beispiel für exemplarischen Inhalt im meta-Element">
    <meta name="keywords" content="example, html, head, meta">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplarische Kopfdaten</title>
  </head>

Meta-Elemente können das Browserverhalten steuern oder Informationen bereitstellen, die beispielsweise von Suchmaschinen genutzt werden können.

Beachten Sie:
  • Sie müssen pro <meta>-Element genau eines der Attribute charset, name, http-equiv oder itemprop verwenden.
  • Das content-Attribut ist Pflicht, wenn Sie name, http-equiv oder itemprop verwenden. Zusammen mit charset ist es hingegen verboten.
Attribute
Name Inhalt Standardwert Bedeutung
charset CDATA deklariert die Zeichenkodierung die in dem Dokument verwendet wird.
Beachten Sie: Wenn Sie für HTML5-Dokumente die Zeichencodierung durch <meta charset="utf-8"> festlegen, müssen Sie darauf achten, dass sich diese Angabe vollständig innerhalb der ersten 1024 Bytes des Dokuments befindet.
Hauptartikel: Zeichencodierung/Unicode in der Praxis
content CDATA gibt den Wert an, der für ein Metadatenfeld, einen HTTP-Header oder ein Microdatenelement zu setzen ist (je nachdem, welches weitere Attribut verwendet wird)
itemprop Tokenlist gibt einen oder mehrere Namen von Microdatenwerten an, die den mit content festgelegten Wert erhalten sollen
http-equiv NAME gibt den Namen des HTTP-Antwortheaders an, für den ein Wert gesetzt werden soll (Details hier)
name NAME gibt den Namen des Metadatenelements an, dessen Wert gesetzt werden soll

Attribut: Pflichtattribut
Attribut: optionales Attribut

Siehe auch

Weblinks

Spec (WHATWG): meta-element

Grundstruktur

HTTP-Äquivalente

Das meta-Element kann das Attribut http-equiv enthalten. Die Absicht dahinter war, dass Webserver den Dokumentinhalt lesen und aus diesen Angaben HTTP-Header erzeugen. In der Praxis ist das jedoch nur selten der Fall. Stattdessen können diese Angaben ersatzweise verwendet werden, wenn der Webserver sich nicht entsprechend konfigurieren lässt. In der Regel hat ein gleichnamiger HTTP-Header Vorrang vor einer Meta-Angabe. Ebenfalls sinnvoll sind diese Angaben, wenn das Dokument lokal – beispielsweise als Datei von Festplatte – gelesen wird, denn in dem Fall stehen keine HTTP-Header zur Verfügung.

Im Folgenden werden nur diejenigen Attributwerte für http-equiv besprochen, die in einem HTML-Dokument auch Sinn ergeben können. Theoretisch ist die Liste der erlaubten Attributwerte aber länger.

expires - Datei von Originaladresse laden

Häufig abgerufene Web-Seiten werden im Web auf so genannten Proxy-Servern zwischengespeichert. Das ist dann ein so genannter Proxy-Cache. Auch Browser speichern aufgerufene Seiten, und zwar lokal auf dem Rechner des Anwenders. Dabei spricht man vom Browser-Cache. Die Cache-Speicher sparen in vielen Fällen Leitungswege und Ressourcen. Ein Nachteil ist jedoch, dass dem Anwender möglicherweise Daten angezeigt werden, die gar nicht mehr aktuell sind, weil auf der Originaladresse mittlerweile neue Daten liegen. Sie können mit Hilfe einer Meta-Angabe erzwingen, dass die Daten nicht aus einem Cache-Speicher serviert werden, sondern vom Original-Server. Zu empfehlen ist diese Angabe, wenn Sie die Daten einer HTML-Datei häufig ändern und neu ins Web hochladen.

Beispiel
<meta http-equiv="expires" content="0">

Mit <meta http-equiv="expires" content="0"> veranlassen Sie, dass diese HTML-Datei in jedem Fall von der Originaladresse geladen wird (expires = ungültig werden, ablaufen).

Anstelle der 0 können Sie auch eine Zahl angeben. Diese Zahl bedeutet dann die Anzahl Sekunden, nach deren Ablauf der Web-Browser eine Datei, die er im Cache hat, auf jeden Fall wieder vom Server lädt. Mit content="43200" stellen Sie beispielsweise einen Wert von 12 Stunden ein.

Anstelle einer Zahl können Sie aber auch ein bestimmtes Datum und eine bestimmte Uhrzeit angeben. Dadurch bewirken Sie, dass die Daten dieser Datei nach dem angegebenen Zeitpunkt auf jeden Fall vom Original-Server geladen werden sollen. Datum und Uhrzeit müssen Sie im internationalen Format angeben. Beispiel: content="Sat, 12 Jun 2010 12:00:00 GMT". Notieren Sie den Zeitpunkt so wie im Beispiel mit allen Leerzeichen, Doppelpunkten zwischen Stunden, Minuten und Sekunden sowie der Angabe GMT am Ende. Als Wochentagnamen sind erlaubt Mon, Tue, Wed, Thu, Fri, Sat und Sun. Als Monatsnamen sind erlaubt Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov und Dec.

refresh - automatisch Aktualisieren oder Weiterleiten (forwarding)

Mit <meta http-equiv="refresh" content="…"> veranlassen Sie, dass die aktuelle Seite nach einer bestimmten Zeit neu geladen wird oder eine andere URL aufgerufen wird. Eine http-equiv Angabe soll eigentlich das Vorhandensein eines gleichnamigen HTTP/Headers simulieren, der Refresh-Header ist allerdings kein Teil von HTTP und wurde von Netscape außerhalb des Standards eingeführt. Mittlerweile steht er aber im HTML-Standard, so dass alle Browser diesem Header und die Metaangabe verstehen sollten.

Verwenden Sie dieses Metaelement nicht, um Push-Verfahren zu implementieren. Wenn viele User häufig einen Refresh auslösen, geht der beste Server in die Knie. Um Clients (also den Browser) über Datenaktualisierungen zu benachrichtigen, gibt es das Push API oder Web-Sockets, womit sich asynchron und nur bei Bedarf Benachrichtigungen und Updates senden lassen. Das Push API setzt allerdings einen Push-Dienst voraus, und Web-Sockets einen dafür geeigneten Server.

Um lediglich neu zu laden, geben Sie im content-Attribut an, nach wievielen Sekunden dies geschehen soll. Der Browser verlangt dafür eine Zahlenangabe ohne Vorzeichen und Nachkommastellen.

Aktualisierung der Seite nach 5 Sekunden 
<meta http-equiv="refresh" content="5">

Die Zeit läuft ab dem Moment, wo die Seite erfolgreich geladen wurde – also nach dem load- und pageshow-Event.

Beachten Sie: Die Richtlinien für barrierefreie Webinhalte (WCAG) des W3C missbilligen dieses Verfahren.[1] Sie als Seitenautor wissen nicht, wie lange Ihre Besucher benötigen, um die angezeigten Informationen aufzunehmen. Und Sie sollen Ihren Besuchern die Möglichkeit einräumen, die automatische Aktualisierung zu pausieren, um den Seiteninhalt in Ruhe wahrnehmen zu können. Mit dem Refresh-Header ist das nicht möglich. Sie können statt dessen mittels JavaScript und der setTimeout-Funktion vorsehen, dass nach einer gewissen Zeit location.reload() aufgerufen wird und auf der Seite Bedienelemente vorsehen, die diesen Reload auf Wunsch ein- und ausschalten. Abgesehen davon hat jeder Browser eine eingebaute Funktion, um eine Webseite manuell zu aktualisieren.

Um an eine andere Adresse weiterzuleiten, ergänzen Sie die Wartezeit um die Angabe ;url=, gefolgt von einer gültigen URL. Dabei gelten die üblichen Regeln zum Referenzieren in HTML. Eine Wartezeit von 0 ist bei einer Weiterleitung möglich, das ist aber lediglich eine Notlösung. Sofortweiterleitungen realisieren Sie besser als serverseitige HTTP-Weiterleitung mit einem geeigneten HTTP 3xx Statuscode.

{{Beispiel|titel=Nach 5 Sekunden zur Startseite des Selfhtml-Wikis| 

<meta http-equiv="refresh" content="5; URL=https://wiki.selfhtml.org/">


Beachten Sie: Auch hier gilt die „Ausreichend Zeit“ Vorgabe des WCAG, wenn die Seite relevante Informationen enthält. Eine automatische Weiterleitung nach einigen Sekunden ist für eine Splash-Page denkbar, die ein Logo oder Werbung anzeigt. Bedenken Sie aber, dass Sie Ihren Besuchern damit lediglich Zeit stehlen. Eine Splash-Page soll eine Wartezeit überbrücken, bis ein Inhalt geladen ist. Mit einem Refresh nach X Sekunden wird das nicht erreicht.

Es kann natürlich auch Anwendungsfälle geben, wo eine automatische Aktualisierung gewünscht und erforderlich ist, zum Beispiel, wenn die Webseite als Wallboard dient. Ein Refresh der Seite ist aber auch dort nicht zu empfehlen, weil die Anzeige dabei flackern kann. Programmieren Sie statt dessen mit JavaScript und AJAX-Techniken eine Datenabfrage und den Update der geänderten Bildschirmbereiche. Man spricht hier von einer Poll-Technik (poll bedeutet abfragen). Wenn die angegebene Zahl der Sekunden nur gering ist (Frequenz ist hoch) und es viele Wallboards gibt, bedeutet Polling für Netzwerk und Server aber eine unnötig hohe Last. Sie sollten dann über die eingangs erwähnten Alternativen (Push API oder Websockets) nachdenken.

Siehe auch: Webserver/htaccess Weiterleitung von einzelnen Seiten oder URLs

x-ua-compatible - Veraltete Internet Explorer Verhaltensweisen auswählen

Diesen http-equiv Wert findet man immer noch an einigen Stellen und in manchen HTML-Vorlagen. Bitte verwenden Sie ihn nicht. Das Verhalten des Microsoft Internet Explorer war ursprünglich weit von den sich entwickelnden Webstandards entfernt, und Microsoft hat ihn Schritt für Schritt an die Standards angepasst. Die Folge war, dass alte Seiten, die auf das Verhalten älterer IE-Versionen ausgelegt waren, nicht mehr korrekt dargestellt wurden. Mit x-ua-compatible konnte man den IE für die Anzeige einer Seite in einen „Altlast-Modus“ versetzen, der das Non-Standard-Verhalten nachbildete (der IE schleppte 5 davon mit sich herum).

Die heutigen Browser, Microsoft Edge eingeschlossen, ignorieren x-ua-compatible, und den Internet Explorer gibt es nur noch als bis 2028 befristete Emulation in MS Edge. Wenn Sie eine Seite betreuen, die diesen Schalter braucht, dann müssen Sie sie unverzüglich modernisieren! Die Anzahl der Anwender, die sie korrekt darstellen können, strebt unaufhaltsam gegen Null.

Quellen

  1. ↑ WCAG 2.1: Ausreichend Zeit - inoffizielle deutsche Übersetzung der Aktion Mensch
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Elemente/meta&oldid=98742#Viewport_einstellen“