Mit HTML5 kann man z.B. einen Messwert in einem Bereich anzeigen, den Arbeitsfortschritt einer Aufgabe darstellen oder eine interaktive Box erstellen, die sich vom Nutzer per Klick öffnen und schließen lässt.
| Element | Beschreibung | HTML | Erklärung |
|---|
| Meter | Meter repräsentiert entweder einen skalaren oder einen Bruchwert innerhalb eines bekannten Bereichs.
| <meter
min="0"
max="100"
low="30"
high="70"
optimum="80"
value="20"
>10%
</meter> | min:
kleinster Wert (Standartwert ist 0)
low:
unterer Schwellenwert (Standardwert = min)
max:
größter Wert (Standartwert ist 1)
high:
oberer Schwellenwert (Standardwert = max)
optimum:
optimaler Wert
value:
aktueller Wert
|
| value=20: 20% value=50: 50% value=90: 90% |
| Progress | Progress zeigt einen Indikator an, der den Fortschritt einer Aufgabe darstellt. Üblicherweise wird dies als Fortschrittsbalken angezeigt. Ohne Value ist der Fortschritt unbestimmt.
| <progress></progress>
<progress
max="100"
value="80"
>80%
</progress>
<progress
max="100"
value="80"
style="accent-color: red;"
>80%
</progress> | max:
Höchstwert (Standardwert ist 1)
value:
aktueller Wert
|
| |
| Details | Details wird verwendet, um einen zunächst nicht sichtbaren Bereich unter einer Beschriftung, Legende oder Frage (Summary) zu erstellen, der per Klick darunter eingeblendet bzw. wieder ausgeblendet wird. Das dafür zu klickende Symbol ist üblicherweise ein dreieckförmiger Pfeil, der jeweils nach rechts bzw. nach unten zeigt.
| <details>
<summary style="
font-weight: bold;
cursor: pointer;
">Hinweis
</summary>
Beispiel ohne Gewähr.
</details>
| open:
Details eingeblendet |
HinweisBeispiel ohne Gewähr. |
Startseite
Kalender
