<meter>: Das HTML-Meter-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Das <meter>-HTML Element repräsentiert entweder einen skalaren Wert innerhalb eines bekannten Bereichs oder einen Bruchwert.

Probieren Sie es aus

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

label {
  padding-right: 10px;
  font-size: 1rem;
}

Attribute

Dieses Element enthält die globalen Attribute.

value

Der aktuelle numerische Wert. Dieser muss zwischen den minimalen und maximalen Werten (min Attribut und max Attribut) liegen, falls sie angegeben sind. Falls nicht spezifiziert oder fehlerhaft, ist der Wert 0. Falls spezifiziert, liegt er aber nicht innerhalb des durch das min Attribut und max Attribut angegebenen Bereichs, so entspricht der Wert dem nächstgelegenen Ende des Bereichs.

Hinweis: Sofern das value Attribut nicht zwischen 0 und 1 (einschließlich) liegt, sollten die min und max Attribute den Bereich so definieren, dass der Wert des value Attributs innerhalb dieses Bereichs liegt.

min

Die untere numerische Grenze des gemessenen Bereichs. Diese muss kleiner sein als der maximale Wert (max Attribut), falls angegeben. Falls nicht angegeben, ist der minimale Wert 0.

max

Die obere numerische Grenze des gemessenen Bereichs. Diese muss größer sein als der minimale Wert (min Attribut), falls angegeben. Falls nicht angegeben, ist der maximale Wert 1.

low

Die obere numerische Grenze des unteren Endes des gemessenen Bereichs. Diese muss größer sein als der minimale Wert (min Attribut) und auch kleiner als der high Wert und der maximale Wert (high Attribut und max Attribut, falls angegeben). Falls nicht angegeben oder kleiner als der minimale Wert, entspricht der low Wert dem minimalen Wert.

high

Die untere numerische Grenze des oberen Endes des gemessenen Bereichs. Diese muss kleiner sein als der maximale Wert (max Attribut) und auch größer als der low Wert und der minimale Wert (low Attribut und min Attribut, falls angegeben). Falls nicht angegeben oder größer als der maximale Wert, entspricht der high Wert dem maximalen Wert.

optimum

Dieses Attribut gibt den optimalen numerischen Wert an. Er muss innerhalb des Bereichs (wie durch das min Attribut und max Attribut definiert) liegen. Wenn es zusammen mit dem low Attribut und high Attribut verwendet wird, gibt es an, welcher Bereich als vorzuziehen gilt. Zum Beispiel, wenn es zwischen dem min Attribut und dem low Attribut liegt, wird der untere Bereich als bevorzugt angesehen. Der Browser kann die Farbe des Balkens im meter Element abhängig davon ändern, ob der Wert kleiner oder gleich dem optimalen Wert ist.

Beispiele

Einfaches Beispiel

HTML

html
<p>Battery level: <meter min="0" max="100" value="75">75%</meter></p>

Ergebnis

Beispiel für hohe und niedrige Bereiche

Beachten Sie, dass in diesem Beispiel das min Attribut weggelassen wurde. Dies ist zulässig, da es standardmäßig auf 0 gesetzt wird.

HTML

html
<p>
  Student's exam score:
  <meter min="0" low="50" high="80" max="100" value="84">84%</meter>
</p>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flow-Inhalt, formulierter Inhalt, beschriftbarer Inhalt, fühlbarer Inhalt.
Erlaubter Inhalt Formulierter Inhalt, aber es darf kein <meter>-Element unter den Nachkommen sein.
Tag-Auslassung Keine, sowohl der startende als auch der endende Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das formulierten Inhalt akzeptiert.
Implizite ARIA-Rolle meter
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLMeterElement`](/de/docs/Web/API/HTMLMeterElement)

Spezifikationen

Specification
HTML
# the-meter-element

Browser-Kompatibilität

Siehe auch