<progress> und <meter>: Zwei wenig bekannte HTML-Tags für einfache Balkendiagramme

Kennen Sie den progress-Tag in HTML? Oder den meter-Tag? Die beiden haben es in sich, werden aber irgendwo zwischen selten und kaum genutzt. Zeit, die beiden Tags einmal genauer anzusehen. Mit ihnen lassen sich nämlich höchst einfach Fortschrittsbalken und/oder Balkendiagramme erstellen.

Wenden wir uns zunächst dem <progress>-Tag zu. Er ist gut geeignet, um einen Fortschrittsbalken darzustellen – gut passend für mehrseitige Inhalte.

Fügen Sie folgenden HTML-Code in der Text- oder HTML-Ansicht Ihres Editors an der gewünschten Stelle der Website ein:

In der Live-Ansicht wird sich dieser Code so zeigen:

Ähnlich – und doch etwas anders – verhält sich der meter-Tag. Er wird zum Beispiel mit folgendem Code aufgerufen, welchen Sie in der HTML- oder Text-Ansicht Ihres Editors einfügen können:

Das ergibt dann folgendes:

Den meter-Tag können Sie aber auch mit einer Prozentzahl versehen. Das tut folgender HTML-Code, den Sie in den Text-Editor einfügen können. Wechseln Sie dafür in die HTML- oder Text-Ansicht:

Das Resultat zeigt sich dann so:

Vielleicht zwei hilfreiche HTML-Tags – bei Gelegenheit.

Die Werte können Sie natürlich auch mit dynamischen Feldern befüllen – etwa aus dem «Advanced Custom Fields»-Plugin.