<meter>

Zuletzt aktualisiert am 4. Februar 2026

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.

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

<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

Beispiele

Speicherplatzanzeige

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

<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).

Testergebnis-Anzeige

Bei Testergebnissen ist ein hoher Wert erwünscht. Hier liegt optimum im hohen Bereich:

<!-- Hoher Wert = gut (optimum=100) -->
<label>HTML-Test: 92 / 100 Punkte</label>
<meter value="92" min="0" max="100"
       low="40" high="70" optimum="100">
  92 Punkte
</meter>

<label>CSS-Test: 55 / 100 Punkte</label>
<meter value="55" min="0" max="100"
       low="40" high="70" optimum="100">
  55 Punkte
</meter>

<label>JavaScript-Test: 25 / 100 Punkte</label>
<meter value="25" min="0" max="100"
       low="40" high="70" optimum="100">
  25 Punkte
</meter>

92 Punkte sind grün (im hohen Bereich, wo auch optimum liegt), 55 gelb (mittlerer Bereich) und 25 rot (niedriger Bereich, weit weg vom Optimum).

Einfaches Meter ohne Bereiche

Du kannst <meter> auch ganz einfach ohne low, high und optimum verwenden. Dann zeigt der Browser einen neutralen Balken ohne Farb-Feedback:

<label for="simple">Anteil: 3 von 5</label>
<meter id="simple" value="3" min="0" max="5">
  3 von 5
</meter>

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

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>.

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.

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.

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

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

Email-Kompatibilität

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.

Verwandte Elemente