<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 skalarischen 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 umfasst die globalen Attribute.

value

Der aktuelle numerische Wert. Dieser muss zwischen dem Mindest- und Höchstwert liegen (min-Attribut und max-Attribut), wenn sie angegeben sind. Wenn nicht angegeben oder ungültig, ist der Wert 0. Wenn angegeben, aber nicht innerhalb des gegebenen Bereichs durch das min-Attribut und max-Attribut, ist der Wert gleich dem nächsten 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 darin liegt.

min

Die untere numerische Grenze des gemessenen Bereichs. Dieser muss kleiner sein als der Höchstwert (max-Attribut), falls angegeben. Wenn nicht angegeben, beträgt der Mindestwert 0.

max

Die obere numerische Grenze des gemessenen Bereichs. Dieser muss größer sein als der Mindestwert (min-Attribut), falls angegeben. Wenn nicht angegeben, beträgt der Höchstwert 1.

low

Die obere numerische Grenze des niedrigen Endes des gemessenen Bereichs. Dieser muss größer sein als der Mindestwert (min-Attribut) und auch kleiner als der hohe Wert und der Höchstwert (high-Attribut und max-Attribut, sofern welche angegeben sind). Wenn nicht angegeben oder wenn kleiner als der Mindestwert, ist der low-Wert gleich dem Mindestwert.

high

Die untere numerische Grenze des hohen Endes des gemessenen Bereichs. Dieser muss kleiner sein als der Höchstwert (max-Attribut) und auch größer als der niedrige Wert und der Mindestwert (low-Attribut und min-Attribut, sofern welche angegeben sind). Wenn nicht angegeben oder wenn größer als der Höchstwert, ist der high-Wert gleich dem Höchstwert.

optimum

Dieses Attribut gibt den optimalen numerischen Wert an. Er muss innerhalb des Bereichs liegen (wie durch das min-Attribut und max-Attribut definiert). Wenn es zusammen mit dem low-Attribut und dem high-Attribut verwendet wird, gibt es eine Angabe, welcher Bereich als vorzugswürdig betrachtet wird. Zum Beispiel, wenn es zwischen dem min-Attribut und dem low-Attribut liegt, wird der niedrigere Bereich als bevorzugt angesehen. Der Browser kann die Leiste des Meters unterschiedlich einfärben, je nachdem, 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 hohen und niedrigen Bereich

Beachten Sie, dass in diesem Beispiel das min Attribut ausgelassen wird. Dies ist erlaubt, da es standardmäßig 0 ist.

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, Phraseninhalt, beschriftbares Inhalt, wahrnehmbares Inhalt.
Erlaubter Inhalt Phraseninhalt, aber es darf kein <meter>-Element unter seinen Nachkommen sein.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Phraseninhalt 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