Hauptmenü

Untermenü

HTML5 - Allgemeine Neuerungen - Optische Elemente

1. Ein Hinweis

Ich zeige euch hier nur die neuen Elemente, die zumindest in einem(!) Browser funktionieren. Ansonsten hätte ich ja nicht mal Screenshots für euch. Außerdem müsst ihr wissen, dass die Darstellung browserabhängig ist und sich somit voneinander unterscheidet. In wie weit man das per CSS angleichen kann, zeig ich euch in den kommenden Tutorials.

Ein Hinweis

Alle folgenden HTML-Tags gehören zu den Inline-Elementen. Auch wenn euch bei später der CSS-Formatierung eine Überraschung erwartet.

2. <details>

Dieses neue Tag wäre eine echte Bereicherung, wenn ... ja wenn denn die gängigen Browser es unterstützen würden. Leider ist derzeit nur der Chrome dazu in der Lage. Zum Testen müsst ihr also den nehmen, denn nur dort funktioniert das Praxisbeispiel.

Beispiel

Text ein/ausblenden

Hier kommt jetzt Text.


<details>
  <summary>Text ein/ausblenden</summary>
  <p>Hier kommt jetzt Text.</p>
</details>

Erläuterung

Bei dem <details>-Element handelt es sich um eine Aus- und Einklappfunktion für untergeordenete Elemente. Wenn man dort als Attribut kein open angibt, so wird alles außer der <summary> ausgeblendet. Wenn man Letzteres weglässt, so soll(!) der Browser einen eigenen Text vorgeben. Damit die Nicht-Chrome-Nutzer das auch sehen, gibt es dazu ein kleines Bildchen.

<details>

Der Pfeil für die Klappfunktion kommt vom Browser. Leider auch dieser komische gelbe Rahmen, den man ums Verrecken nicht wegbekommt. Da werden die Designer aufheulen, wenn sie den mal zu Gesicht bekommen. Ach ja, die Geschwindigkeit kann man ebenfalls nicht beeinflussen. Auch eine Animation per JavaScript ist meines Wissens nicht möglich.

3. <mark>

Damit kann man einen Textabschnitt farblich markieren. Der Standardwert ist gelb, aber das kann man wunderbar mit CSS formatieren.

Beispiel

Hier kommt Text mit einem farblich markierten Bereich.


<p>
  Hier kommt Text mit einem <mark>farblich markierten</markBereich.
</p>

4. <meter>

Dieses Tag stellt eine Messung innerhalb eines Bereichs dar. Es handelt sich dabei also um einen prozentualen Anteil.

Beispiel

50%

<meter min="128" max="352" value="240">50%</meter>

Erläuterung

<meter> benötigt drei Attribute. min für den Anfangs- und max für den Endwert. value stellt dabei den aktuellen Stand dar. Für Browser, die damit nicht klarkommen, kann man den Prozentwert angeben.

Für alle Fälle gibt es noch ein Bildchen dazu.

<meter>

Die Berechung

... erfolgt ausgehend vom min-Wert. Also (value - min) / (max - min).

Eine Anmerkung

Zu den Attributen min und max werde ich mich später ausführlich auslassen. Also habt ein klein wenig Geduld.

5. <progress>

Im Gegensatz zu <meter> handelt es sich hier um eine Fortschrittsanzeige. Darum gibt es hier auch keinen min-Wert.

Beispiel

63%

<progress id="progressBar" max="100" value="63">63%</progress>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt