mitmario.dev

<meter>

Das <meter>-Element stellt einen skalaren Messwert innerhalb eines bekannten Bereichs dar. Typische Anwendungsfälle sind Speicherplatzanzeigen, Testergebnisse, Bewertungen oder Lautstärkepegel. Anders als <progress> zeigt <meter> keinen Fortschritt, sondern einen statischen Wert auf einer Skala. Der Browser passt die Farbe automatisch an, je nachdem ob der Wert im guten, mittleren oder kritischen Bereich liegt.

Steckbrief <meter>
Kategorie
Formulare
Art
Inline
Attribute
6
Beispiele
3
Browser
5 von 5
E-Mail
0 von 5
Stand
04.02.2026

Grundlagen

Das Besondere an <meter> ist das eingebaute Farb-Feedback. Über die Attribute low, high und optimum definierst du, welche Wertebereiche als gut, akzeptabel oder schlecht gelten. Der Browser färbt den Balken entsprechend: grün, gelb oder rot. Das passiert automatisch, ohne CSS.

  • <meter> zeigt einen Wert auf einer Skala zwischen min und max an
  • low und high unterteilen die Skala in drei Bereiche: niedrig, mittel, hoch
  • optimum gibt an, welcher Bereich der ideale ist, davon hängt die Farbgebung ab
  • Wenn optimum im niedrigen Bereich liegt, wird ein hoher Wert als schlecht dargestellt (und umgekehrt)
  • Der Text zwischen den Tags dient als Fallback für ältere Browser
  • <meter> ist ein Inline-Element
  • Es ist nicht für Fortschrittsanzeigen gedacht, dafür gibt es <progress>

Syntax

index.html
Grundsyntax
<label for="disk">Speicherplatz:</label>
<meter id="disk" value="6" min="0" max="10"
       low="2" high="8" optimum="5">
  6 von 10 GB belegt
</meter>
<p>6 von 10 GB belegt</p>

Attribute

6 Attribute
Attribut und Beispiel Beschreibung
value Number
value="6"
Der aktuelle Messwert. Muss zwischen min und max liegen.
min Number
min="0"
Der Minimalwert der Skala. Standardwert ist 0.
max Number
max="100"
Der Maximalwert der Skala. Standardwert ist 1.
low Number
low="25"
Die obere Grenze des niedrigen Bereichs. Werte darunter gelten als niedrig.
high Number
high="75"
Die untere Grenze des hohen Bereichs. Werte darüber gelten als hoch.
optimum Number
optimum="50"
Der optimale Wert. Bestimmt, welcher Bereich als gut (grün) dargestellt wird.

Beispiele

3 Beispiele

Eine klassische Speicherplatzanzeige mit drei Zuständen: wenig belegt (gut), mittel belegt und fast voll (kritisch).

index.html
Speicherplatz-Anzeige
<div>
  <span>Fotos</span>
  <span>2.1 / 15 GB</span>
  <meter value="2.1" min="0" max="15"
         low="5" high="12" optimum="0">
    2.1 GB von 15 GB
  </meter>
</div>

<div>
  <span>Dokumente</span>
  <span>8.5 / 15 GB</span>
  <meter value="8.5" min="0" max="15"
         low="5" high="12" optimum="0">
    8.5 GB von 15 GB
  </meter>
</div>

<div>
  <span>Videos</span>
  <span>13.8 / 15 GB</span>
  <meter value="13.8" min="0" max="15"
         low="5" high="12" optimum="0">
    13.8 GB von 15 GB
  </meter>
</div>

Weil optimum="0" im niedrigen Bereich liegt, signalisiert der Browser: “Je weniger belegt, desto besser.” 2.1 GB ist grün (gut), 8.5 GB gelb (okay), 13.8 GB rot (kritisch).

Barrierefreiheit

Das <meter>-Element hat die implizite ARIA-Rolle meter. Screenreader lesen den aktuellen Wert und den Bereich vor, sodass Nutzer die Information auch ohne visuelles Feedback erhalten. Verwende immer ein zugehöriges <label>, damit klar ist, was der Wert bedeutet.

Screenreader geben in der Regel den Wert als Prozentsatz des Bereichs an. “Speicherplatz: 6 von 10” ist verständlicher als nur “60%”, deshalb sollte der sichtbare Text die konkreten Werte enthalten.

Verlasse dich nicht allein auf die Farbgebung, um Zustände zu kommunizieren. Ergänze den Farbwechsel immer mit textlichen Hinweisen wie “kritisch”, “fast voll” oder konkreten Zahlenwerten. Farbenblinde Nutzer können die Farben sonst nicht unterscheiden.

Häufige Fehler

4 Fehler
01 Meter für Fortschritt verwenden
<meter> zeigt einen statischen Messwert an, keinen laufenden Vorgang. Für Downloads, Uploads oder Installationen ist <progress> das richtige Element. Eine gute Faustregel: Wenn der Wert “fertig” werden kann, ist es ein <progress>. Wenn der Wert einfach einen Zustand beschreibt, ist es ein <meter>.
02 optimum falsch setzen
Das optimum-Attribut bestimmt die gesamte Farblogik. Wenn du Speicherplatz anzeigst, sollte optimum niedrig sein (wenig belegt = gut). Bei Testergebnissen sollte optimum hoch sein (viele Punkte = gut). Ein falsches optimum dreht die Farben um: Voller Speicher wird dann grün statt rot.
03 low und high vertauschen
low muss kleiner als high sein, und beide müssen zwischen min und max liegen. Wenn die Werte nicht logisch sind, ignoriert der Browser die Bereichsunterteilung und zeigt einen neutralen Balken.
04 Fehlenden Textkontext
<meter> allein zeigt nur einen Balken. Ohne Label oder beschreibenden Text weiß niemand, was der Wert bedeutet. Verwende immer ein <label> und zeige den konkreten Zahlenwert auch als Text an.

Browser-Kompatibilität

5 von 5

Das meter-Element wird von allen modernen Browsern unterstützt. Die Farbgebung und das Aussehen variieren je nach Browser und Betriebssystem.

  • Chrome

    Komplett

    Styling via ::-webkit-meter-bar und ::-webkit-meter-optimum-value

  • Firefox

    Komplett

    Styling via ::-moz-meter-bar

  • Safari

    Komplett

    Styling via ::-webkit-meter-bar und ::-webkit-meter-optimum-value

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

0 von 5

Das meter-Element wird von keinem relevanten E-Mail-Client unterstützt. Für Anzeigen in E-Mails kannst du eine CSS-basierte Lösung mit farbigen div-Elementen und festen Breiten verwenden.

  • Apple Mail

    Keine

    Zeigt den Fallback-Text statt des Balkens an.

  • Gmail

    Keine

    Entfernt das meter-Element komplett.

  • Outlook

    Keine

    Keine Unterstützung für meter. Verwende Tabellen-Layouts.

  • Thunderbird

    Keine

    Zeigt den Fallback-Text an.

  • Yahoo Mail

    Keine

    Entfernt das meter-Element.

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.