HTML Meter / Messwert Generator
Anders als <progress> für absolute Messwerte mit definiertem Min/Max-Bereich.
Anwendung & Beispiele
Anders gefärbt je nach Bereich: unter low rot, zwischen low/high gelb, sonst grün – Browser-spezifisch.
FAQ
Wann <meter> statt <progress>?
Wenn der Wert NICHT eine fortlaufende Aufgabe darstellt, sondern eine aktuelle Messung — z.B. "70 % Festplatte voll", "3 von 5 Sterne", "65 dB Lautstärke".
Wozu sind low, high, optimum?
Bereiche für die automatische Farbgebung. Browser stellen Werte unter low rot, zwischen low/high gelb, über high grün dar — abhängig von optimum (rot wenn optimum weit weg).
Funktioniert <meter> in IE?
Nein. Moderner Edge ja. Im IE 11 fällt es auf den Text zwischen den Tags zurück — daher dort <meter>{Wert}</meter> als Fallback schreiben.
Wofür sind ID, Class und Title?
id identifiziert ein Element eindeutig (für CSS, JS, Anker-Links). class erlaubt CSS-Styling, mehrere Klassen werden mit Leerzeichen getrennt. title erzeugt einen Tooltip beim Hover.
Funktioniert der Code in allen Browsern?
Alle hier erzeugten Elemente sind valides HTML5 und werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Bei sehr alten Browsern (z.B. IE 11) kann es bei einzelnen Input-Typen wie color oder date Einschränkungen geben.