Metrische Werte auszeichnen

HTML5 führt ein allgemeines Element zur Auszeichnung von Werten ein, die zu einer Skala gehören. Beispiele sind Ratings („3 von 5 Sternen“), Sitzverteilungen im Parlament („208 von 598 Sitzen“) oder einfach Prozentwerte („0,34%“). Durch Attribute ist die Werteskala beschreibbar, und eine auslesende Software oder ein Script hat die Möglichkeit, den eigentlichen Wert mit Hilfe dieser Informationen einzuordnen.

Beispiel

<ul>
<li><meter value="7" max="10"></meter> Sieben von zehn Deutschen 
bezahlen zu hohe Kreditkartengebühren</li>
<li>Durchschnittliche Wertung: <meter value="4" max="5">
<img src="four-stars.png" alt="4 Sterne"></meter></li>
<li>Der aktuelle Pegelstand des Rheins beträgt <meter value="4.25" max="10.43" 
min="1.49" low="2.00" high="6.00" optimum="4.15">4,25m</meter>.</li>
</ul>

Erläuterung

Das Beispiel enthält keine formularbezogenen Daten, sondern eine unsortierte Liste mit einigen Aussagen. Darin kommen Werte vor, die sich auf einer Skala abbilden lassen. Zur „Bemaßung“ wird das meter-Element verwendet. Der Name meter hat nichts mit der Maßeinheit Meter zu tun. Es sind beliebige Maßeinheiten und Skalierungen anwendbar.

Das meter-Element wird durch <meter>…</meter> markiert. Der Elementinhalt kann aus Text und anderen HTML-Elementen (Phrasing-Content) bestehen (siehe Buchabschnitt über Content-Modelle. Sinnvollerweise schließt das Element eine Wertangabe ein. Diese kann jedoch durchaus aus mehreren Wörtern oder auch aus nonverbalen Inhalten wie einer Grafik bestehen.

Zum Redaktionszeitpunkt stand noch nicht fest, wie genau das meter-Element von Browsern visualisiert werden soll. Die HTML5-Spezifikation schlägt eine schlichte Balkengrafik-Darstellung vor. Nachfolgende Abbildung zeigt eine meter-Definition und eine Visualisierung wie in der Spezifikation vorgeschlagen:

Die Skala und der aktuelle Wert werden in den Attributen einleitenden <meter>-Tags definiert. Alle die nachfolgend genannten Attribute erwarten als Wert eine gültige Ganzzahl oder Fließkommazahl. Bei Bruchzahlen ist der Punkt das Dezimalzeichen.

Obligatorisch ist das value-Attribut. Es enthält den eigentlichen aktuellen Wert. Wenn Sie das max-Attribut weglassen, wird intern ein Maximalwert von 1 angenommen. Wenn dieser voreingestellte Maximalwert für einen konkreten Zusammenhang unbrauchbar ist, müssen Sie mit dem max-Attribut einen anderen, gewünschten Wert angeben.

Das Gegenstück zum max-Attribut ist das min-Attribut. Wenn es auf der Skala des beschriebenen Werts einen Minimalwert gibt, können Sie ihn mit diesem Attribut angeben. Ansonsten wird intern der Wert 0 als Minimalwert angenommen.

Ferner werden noch die Attribute low, high und optimum angeboten. Mit min und low im Zusammenspiel können Sie einen Minimalwert und einen Niedrigwert (eventuell kritischer Punkt) bestimmen, wobei der Niedrigwert über dem Minimalwert liegen muss. Analog dazu können Sie mit max und high einen Maximalwert und einen Wert für „hoch“ (eventuell kritisch hoch) bestimmen. Das Attribut optimum erlaubt die Angabe eines Optimalwerts, sofern es einen solchen gibt.

Referenzinformationen

HTML5 XHTML5 CHROME SAFARI5.2 OPERA11.0

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License