Die beiden neuen HTML5-Tags <progress> und <meter>. Während man mit <progress> anzeigt, wie weit etwas schon fertig ist (Fortschrittsanzeige) ist <meter> für die Anzeige von Werten wie ein Messinstrument geeignet.
Obwohl die Anzeigen beider Tags auf einer Internetseite sehr ähnlich aussehen können, haben sie doch eine recht unterschiedliche Bedeutung, denn bei <progress> ist immer das Erreichen eines bekannten oder unbekannten Endwertes das Ziel, bei <meter> eben nicht.
Als Beispiel für <meter> ein Thermometer, dass einen Bereich von 0 bis 50° abdeckt:
<meter min="0" max="50" value="39" title="Grad Celsius">39°</meter>39°
Wenn Sie hier z.B. mit Firefox noch keinen Balken, sondern nur die 39° sehen, probieren Sie es mal mit dem Browser Chrome, der kann es schon…
Das einfachste Beispiel für <progress> hat folgenden Code:
<progress>In Bearbeitung</progress>
Das führt zur Ausgabe eines Fortschrittsbalkens, der aber keine Werte angibt, sondern nur zeigt, dass noch etwas passiert:
Dabei ist der Text innerhalb des Tags eine Art Fallback für ältere Browser. Wenn ein Browser wie z.B. ein älterer Internet Explorer das Tag nicht kennt, liest man dort “In Bearbeitung” und sieht keinen Balken.
Ein Fortschrittsbalken mit Werten kann zum Beispiel so erzeugt werden:
<progress value="25" max="100">25%</progress>
