HTML <meter>-Tag

Das <meter>-Tag ist eines der HTML5-Elemente. Es definiert eine skalare Messung innerhalb eines bekannten Bereichs — einen einzelnen Wert, der irgendwo zwischen einem Minimum und einem Maximum liegt. Typische Anwendungsfälle sind Akkustand, Festplattennutzung, ein Testergebnis, eine Relevanzbewertung oder der Füllstand eines Behälters. Da die Anzeige eine feste Skala benötigt, sollte der Maximalwert immer bekannt (und in der Regel angegeben) sein.

Diese Seite behandelt die <meter>-Syntax und -Attribute, wie die Attribute low, high und optimum die Farbe der Anzeige steuern, wie ein Meter für Barrierefreiheit beschriftet wird und welche Grenzen das CSS-Styling hat.

Info

<meter> vs. <progress>: Verwenden Sie <meter> für eine statische Messung (z. B. „6,7 GB von 8 GB belegt"). Verwenden Sie <progress> für den Fortschritt einer Aufgabe, die sich auf 100 % zubewegt (z. B. ein Dateiupload oder Seitenlade). Sie sehen ähnlich aus, haben aber unterschiedliche Bedeutungen.

Syntax

Das <meter>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<meter>) und dem schließenden (</meter>) Tag geschrieben.

Beispiel des HTML-`<meter>`-Tags:

Beispiel des HTML <meter>-Tags|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <meter value="4" min="0" max="10">4 out of 10</meter> 4 Out of 10<br />
    <meter value="0.75">75%</meter> 75%
  </body>
</html>

Probier es selbst »

Ergebnis

Gefahr

Das <meter>-Tag wird nicht verwendet, um Fortschritte anzuzeigen. Verwenden Sie dafür das <progress>-Tag.

Tipp

Verwenden Sie die CSS-Eigenschaften background-color, box-shadow, width und height, um das <meter>-Element zu gestalten.

Barrierefreiheit: Meter immer beschriften

Ein <meter>-Element hat keinen impliziten zugänglichen Namen. Ohne zusätzliche Beschriftung gibt ein Screenreader nur den Wert aus, ohne anzuzeigen, was gemessen wird. Der Text zwischen den Tags ist ein visueller Fallback für sehr alte Browser — er wird nicht zuverlässig als zugänglicher Name erkannt.

Versehen Sie jeden Meter mit einer echten Beschriftung. Die klarste Option ist ein <label>-Element, das über id verknüpft ist; alternativ können Sie aria-label oder aria-labelledby verwenden.

Beschriften eines <meter>-Elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- Associated <label> -->
    <label for="disk">Disk usage:</label>
    <meter id="disk" value="6" min="0" max="8">6 GB of 8 GB</meter>

    <!-- aria-label when no visible label is shown -->
    <meter value="0.6" aria-label="Password strength">60%</meter>
  </body>
</html>

Result

Farbzonen: `low`, `high` und `optimum`

Der Browser färbt den Meter automatisch ein, basierend darauf, wo value relativ zu den Attributen low, high und optimum liegt. Die Schwellenwerte teilen den Bereich in drei Zonen auf — unterhalb von low, zwischen low und high sowie oberhalb von high — und optimum teilt dem Browser mit, welche Zone die gute ist. Daraus wählt der Browser einen von drei Zuständen:

Grün — der Wert liegt in der (oder benachbart zur) Zone, die optimum enthält. Dies ist die „gute" Zone.
Gelb — der Wert liegt eine Zone vom optimalen Bereich entfernt (akzeptabel, aber nicht ideal).
Rot — der Wert liegt in der Zone, die der Seite von optimum gegenüberliegt (die schlechteste Zone).

Die genauen Farben hängen vom Browser ab, aber die Grün/Gelb/Rot-Logik ist konsistent. Beachten Sie, dass hoch und niedrig nicht bedeutet „groß = gut". Wenn optimum unterhalb von low liegt, sind kleine Werte grün und große Werte werden rot.

Drei Meter, die den drei Farbzuständen entsprechen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- value above high, optimum is low -> red -->
    <label for="m1">Server load (high is bad):</label>
    <meter id="m1" value="90" min="0" max="100" low="33" high="66" optimum="10">90%</meter>
    <br />

    <!-- value in the middle band -> yellow -->
    <label for="m2">Server load (medium):</label>
    <meter id="m2" value="50" min="0" max="100" low="33" high="66" optimum="10">50%</meter>
    <br />

    <!-- value in the optimum band -> green -->
    <label for="m3">Server load (low is good):</label>
    <meter id="m3" value="15" min="0" max="100" low="33" high="66" optimum="10">15%</meter>
  </body>
</html>

Result

Da optimum (10) hier in der niedrigen Zone liegt, sind niedrige Werte gesund (grün) und hohe Werte gefährlich (rot) — genau das, was man für etwas wie CPU-Auslastung möchte. Dreht man optimum auf eine hohe Zahl um, kehren sich die Farben um, was für einen „Akkustand"- oder „Passwortstärke"-Meter geeignet ist, bei dem mehr besser ist.

Anzeige eines Zahlenbereichs

Die Attribute min und max definieren die Skala, gegen die die Anzeige gezeichnet wird. Der value wird auf dieser Skala interpretiert: Mit min="0" und max="70" füllt ein value von 15 etwa 21 % des Balkens. Verwenden Sie das Attribut optimum, um den idealen Punkt im Bereich zu markieren — zum Beispiel die Bestehensgrenze bei einem Test — was (zusammen mit low und high) die oben beschriebene Anzeigefarbe steuert.

Ein Testergebnis von 70, bei dem höher besser ist:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="score">Test score:</label>
    <meter id="score" value="15" min="0" max="70" low="35" high="55" optimum="65">15 out of 70</meter>
  </body>
</html>

Result

Anzeige eines Prozentsatzes

Wenn min und max weggelassen werden, sind deren Standardwerte 0 bzw. 1. Das macht <meter> praktisch für Brüche: Ein value von 0.8 wird als 80 % des Balkens dargestellt. Dies ist nützlich für Dinge wie einen Relevanzscore oder einen „Profilzollständigkeit"-Indikator.

Geben Sie immer eine sichtbare Beschriftung (oder aria-label) und einen für Menschen lesbaren Fallback-Text an, damit die Bedeutung auch ohne Styling klar ist.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="complete">Profile completeness:</label>
    <meter id="complete" value="0.8">80%</meter>
  </body>
</html>

Result

Styling des HTML-`<meter>`-Tags

Legen Sie zunächst die Größe mit den Eigenschaften width und height fest.

Beispiel des HTML-<meter>-Tags:

meter {
  width: 300px;
  height: 20px;
}

Moderne Browser bieten keine zuverlässigen, browserübergreifenden Styling-Hooks für das native meter-Steuerelement. Die unten gezeigten herstellerspezifischen Pseudo-Elemente sind in aktuellen Browsern veraltet oder nicht unterstützt und sollten daher nicht für das Produktionsstyling verwendet werden. Wenn Sie einen vollständig gestalteten, barrierefreien Indikator benötigen, sollten Sie eine benutzerdefinierte ARIA-konforme Komponente oder das <progress>-Tag verwenden, wenn der Wert einen Fortschritt darstellt.

Die folgenden Beispiele dienen nur als Referenz, sind aber fragil: Jeder Browser stellt eigene nicht standardisierte Pseudo-Elemente bereit, sie sind nicht interoperabel, und einige wurden vollständig entfernt. Wenn Sie einen vollständig gestalteten, barrierefreien Indikator benötigen, erstellen Sie eine benutzerdefinierte Komponente aus einfachen Elementen mit role="meter", aria-valuenow, aria-valuemin und aria-valuemax und animieren Sie diese stattdessen. Die Webkit/Blink-Engines stellen folgende Pseudo-Elemente bereit:

Pseudo-Klasse	Beschreibung
-webkit-meter-inner-element	Zusätzliches Markup, das für die schreibgeschützte Darstellung des meter-Elements verwendet wird.
-webkit-meter-bar	Enthält die Messskala, die den Wert hält.
-webkit-meter-optimum-value	Der aktuelle Wert des meter-Elements, der standardmäßig grün ist, wenn das value-Attribut im Bereich zwischen low und high liegt.
-webkit-meter-suboptimum-value	Das meter-Tag wird gelb, wenn der Wert außerhalb des low-high-Bereichs liegt.
-webkit-meter-even-less-good-value	Das meter-Tag wird rot, wenn der Wert und das optimum-Attribut außerhalb des low-high-Bereichs, aber in entgegengesetzten Zonen liegen. Beispiel: value high > low > optimum.

Anschließend muss das Standard-appearance der Messskala auf „none" gesetzt werden.

meter-Tag mit der appearance-Eigenschaft gestylt

meter {
  -webkit-appearance: none;
}

Im folgenden Beispiel werden die Pseudo-Klassen -webkit-meter-bar und -webkit-meter-optimum-value verwendet.

Styling des HTML-<meter>-Tags

meter::-webkit-meter-bar {
  background: none;
  background-color: lightgrey;
  box-shadow: 0 3px 3px -3px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 3px 3px -3px #999 inset;
  background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
  background-size: 100% 100%;
}

Jede Farbe im linearen Hintergrundfarbverlauf stellt den Bereich dar, der von den Unterkategorien belegt wird.

Styling des HTML-<meter>-Tags

meter::-webkit-meter-optimum-value {
  -webkit-transition: width .5s;
}

meter::-webkit-meter-optimum-value:hover {
  background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
  transition: width .5s;
  width: 100%;
}

Beispiel für das Styling des HTML-`<meter>`-Tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 300px;
        height: 20px;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgrey;
        box-shadow: 0 3px 3px -3px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        box-shadow: 0 3px 3px -3px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <meter value="30" min="0" max="70"></meter>
  </body>
</html>

Probier es selbst »

Sowohl die Eigenschaften transition als auch animation auf dem <meter>-Element werden von Webkit-Browsern unterstützt. Ändern Sie die Breite des Werts (bei :hover) mithilfe von Übergängen und animieren Sie die background-position des Containers mit keyframes.

Beispiel für das Styling des HTML-`<meter>`-Tags mit der CSS-transition-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 300px;
        height: 20px;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgrey;
        box-shadow: 0 3px 3px -3px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        -webkit-transition: width .5s;
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
      meter::-webkit-meter-optimum-value:hover {
        /* Reset each sub-category to 20% */
        background-image: linear-gradient( 90deg, #2286c9 20%, #FF00FF 20%, #FF00FF 40%, #04C319 40%, #04C319 60%, #F1F70D 60%, #F1F70D 80%, #00FFCC 80%, #00FFCC 100%);
        transition: width .5s;
        width: 100% !important;
      }
    </style>
  </head>
  <body>
    <meter value="25" min="0" max="70"></meter>
  </body>
</html>

Probier es selbst »

Pseudo-Elemente auf der Messskala werden nur von Webkit-Browsern unterstützt. Die Pseudo-Elemente können verwendet werden, um Meta-Informationen oberhalb der Messskala anzuzeigen.

Styling des HTML-<meter>-Tags

meter {
  margin: 2em;
  position: relative;
}

meter::before {
  content: 'Used storage';
  position: absolute;
  top: -100%;
}

meter::after {
  content: 'Free storage';
  position: absolute;
  top: -100%;
  right: 0;
}

Beispiel des HTML-`<meter>`-Tags mit Pseudo-Elementen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        margin: 2em;
        width: 400px;
        height: 30px;
        position: relative;
      }
      meter::before {
        content: 'Used storage';
        position: absolute;
        top: -100%;
      }
      meter::after {
        content: 'Free storage';
        position: absolute;
        top: -100%;
        right: 0;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgray;
        box-shadow: 0 5px 5px -5px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        -webkit-transition: width .5s;
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #8bcf69 5%, #e6d450 5%, #e6d450 15%, #f28f68 15%, #f28f68 55%, #cf82bf 55%, #cf82bf 95%, #719fd1 95%, #719fd1 100%);
        background-size: 100% 100%;
      }
      meter::-webkit-meter-optimum-value:hover {
        /* Reset each sub-category to 20% */
        background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
        transition: width .5s;
        width: 100% !important;
        /* !important required. to override the inline styles in WebKit. */
      }
    </style>
  </head>
  <body>
    <meter value="25" min="0" max="70"></meter>
  </body>
</html>

Probier es selbst »

Nun verwenden wir den Firefox-Fallback. Malen Sie die Messskala mit -moz-appearance: meterbar. Wenn Sie die standardmäßige Abschrägung und Prägung nicht benötigen, setzen Sie -moz-appearance auf „none".

Styling des HTML-<meter>-Tags

meter {
  -moz-appearance: none;
  width: 400px;
  height: 30px;
}

Firefox unterstützt das Styling der Messskala über CSS-Pseudo-Elemente nicht mehr.

Hier wird der Hintergrund des Messskalenwerts mit der Pseudo-Klasse ::-moz-meter-bar gestylt.

Styling des HTML-<meter>-Tags

meter::-moz-meter-bar {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
  background-size: 100% 100%;
}

In Firefox kann der meter-Selektor selbst verwendet werden, um den Hintergrund des Containers zu gestalten.

Styling des HTML-<meter>-Tags

meter {
  background: none;
  background-color: lightgray;
  box-shadow: 0 5px 5px -5px #333 inset;
}

Beispiel des HTML-`<meter>`-Tags für Firefox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 400px;
        height: 30px;
        background: none;
        /* Required to get rid of the default background property */
        background-color: lightgray;
        box-shadow: 0 5px 5px -5px #333 inset;
      }
      meter::-moz-meter-bar {
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <meter value="30" min="0" max="70"></meter>
  </body>
</html>

Probier es selbst »

Die Pseudo-Elemente ::before und ::after auf der Messskala werden von Firefox nicht unterstützt. Auch die Unterstützung für CSS3-Übergänge und -Animationen ist schwach.

Attribute

Attribut	Wert	Beschreibung
form	form_id	Gibt das Formular (die Formulare) an, zu dem das `<meter>`-Tag gehört.
high	number	Gibt hohe Werte an (aber nicht die maximalen). Wenn der high-Wert kleiner als low ist, gilt high = low. Wenn high größer als max gesetzt wird, gilt high = max.
low	number	Definiert niedrige Werte (aber nicht die minimalen). Dieser Wert muss kleiner als high sein. Wenn der low-Wert kleiner als min ist, gilt low = min.
max	number	Definiert den maximal möglichen Wert. Der Standardwert ist 1.
min	number	Definiert den minimal möglichen Wert. Der Standardwert ist 0.
optimum	number	Definiert den optimalen Wert, der innerhalb des durch die Attribute min und max definierten Bereichs liegen muss. Er kann größer als der high-Wert sein.
value	number	Legt den aktuellen Wert fest. Wenn weggelassen, ist der Standardwert 0,5.

Das <meter>-Tag unterstützt die globalen Attribute und die Ereignisattribute.

Übung

Was stellt das HTML-meter-Element dar?

Eine skalare Messung innerhalb eines bekannten Bereichs, wie Festplattennutzung oder ein Testergebnis.Den Abschlussfortschritt einer Aufgabe, die sich auf 100 % zubewegt.Ein Dropdown-Listensteuerelement zur Auswahl einer Option.Einen Hyperlink zu einem anderen Dokument.

Syntax

Beispiel des HTML-<meter>-Tags:

Ergebnis

Barrierefreiheit: Meter immer beschriften

Farbzonen: low, high und optimum

Anzeige eines Zahlenbereichs

Anzeige eines Prozentsatzes

Styling des HTML-<meter>-Tags

Beispiel für das Styling des HTML-<meter>-Tags:

Beispiel für das Styling des HTML-<meter>-Tags mit der CSS-transition-Eigenschaft:

Beispiel des HTML-<meter>-Tags mit Pseudo-Elementen:

Beispiel des HTML-<meter>-Tags für Firefox:

Attribute

Übung

Beispiel des HTML-`<meter>`-Tags:

Farbzonen: `low`, `high` und `optimum`

Styling des HTML-`<meter>`-Tags

Beispiel für das Styling des HTML-`<meter>`-Tags:

Beispiel für das Styling des HTML-`<meter>`-Tags mit der CSS-transition-Eigenschaft:

Beispiel des HTML-`<meter>`-Tags mit Pseudo-Elementen:

Beispiel des HTML-`<meter>`-Tags für Firefox: