3 unterschätzte HTML-Elemente, die einfach großartig sind
Wusstest du, dass es über 100 verschiedene HTML-Elemente gibt? Einige davon wie <h1>, <p> oder <img> sind uns allen geläufig. Doch viele Elemente fristen ein Nischendasein. Manche Web-Entwickler:innen wissen nicht mal von ihrer Existenz.
Aus diesem Grund möchte ich in diesem Artikel drei unterschätzte HTML-Elemente vor den Vorhang holen: <time>, <picture> und <dl>.
Foto: © Olya Kobruseva / pexels.com
Das time-Element: Maschinenlesbare Datum- und Zeitangaben
Das HTML-Element <time> repräsentiert einen konkreten Zeitpunkt, Datum oder Zeitraum. Zusammen mit dem Attribut datetime wird die Zeitangabe maschinenlesbar. Wozu das gut ist? Hier ein Beispiel:
Das Beispiel enthält drei Termine, deren Datum jeweils im Stil eines Abreißkalenders dargestellt wird. Vielleicht denkst du jetzt: Oida, das erklärt sich eh von selbst! Zusammen mit der Überschrift „Termine 2022“ ist doch klar, welches Datum gemeint ist.
Sehende werden wohl tatsächlich kein Problem mit dieser Darstellung des Datums haben. Anders die Situation für blinde oder sehbeeinträchtigte Nutzer:innen. Wenn der Screenreader "mär vier" oder "jul acht" vorliest, wird das verwirrend sein. Das <time> Element sorgt hier für Klarheit.
Leider unterstützen noch nicht alle gängigen Screenreader das Element. VoiceOver liest das im datetime Attribut definierte Datum korrekt vor (getestet mit einem iPhone 8, iOS 15, Safari). Mit den Screenreadern NVDA und TalkBack funktioniert das leider derzeit nicht.
Das picture-Element: Bilder in der passenden Größe laden
Das HTML-Element <picture> ist ein Container, der zur Angabe mehrerer Quellen für ein Bild dient. Es muss ein <img> Element und kann mehrere <source> Elemente enthalten. Damit kannst du das Bild für verschiedene Bildschirmauflösungen und Browser optimieren. Schauen wir uns ein Beispiel an:
<picture>
<source srcset="cat_lg.avif" type="image/avif" media="(min-width: 60rem)">
<source srcset="cat_md.avif" type="image/avif">
<source srcset="cat_lg.webp" type="image/webp" media="(min-width: 60rem)">
<source srcset="cat_md.webp" type="image/webp">
<source srcset="cat_lg.jpg" media="(min-width: 60rem)">
<img src="cat_md.jpg" alt="An adorable cat" loading="lazy" decoding="async">
</picture>
Das Attribut type erlaubt die Angabe des MIME-Typs der im Attribut srcset angegebenen Ressource. Das erste <source> Element im Beispiel oben verweist auf ein Bild im neuen AVIF-Format. Wenn der Browser AVIF-Bilder wiedergeben kann, wählt er diese Bilddatei. Andernfalls geht es weiter zum nächsten <source> Element.
Auf diese Weise können moderne Browser, die das AVIF- oder WebP-Format unterstützen, ein stark komprimiertes Bild in hoher Qualität laden. Ältere Browser können hingegen auf die JPG-Version des Bildes zurückgreifen.
Das Attribut media erlaubt die Angabe einer Media-Query, die der Browser auswertet. Im Beispiel sagen wir dem Browser, das größere Bild zu verwenden, wenn die Bildschirmbreite mindestens 60 rem beträgt. Wenn eine Media-Query nicht zutrifft, geht es ebenfalls weiter zum nächsten <source> Element.
Foto: © Ihsan Adityawarman / pexels.com
Eine weitere Möglichkeit zur Bildoptimierung bietet das Attribut srcset. Dieses kannst du auch direkt mit dem <img> Element verwenden, wie das süße Katzenfoto oben zeigt. Dessen HTML-Code sieht ungefähr so aus:
<img
srcset="cat-480w.jpg 480w, cat-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="cat-800w.jpg"
alt="Eine schlafende Katze mit schwarz-grauem Fell."
>
Das srcset Attribut definiert eine Reihe von Bildern, aus denen der Browser wählen kann, sowie die Größe der Bilder. Das sizes Attribut definiert eine Reihe von Bedingungen (z.B. Bildschirmbreite) und gibt an, welche Bildgröße der Browser wählen sollte, wenn eine bestimmte Media-Query zutrifft.
Wenn ihr noch tiefer in das Thema einsteigen wollt, kann ich folgende Artikel empfehlen:
Schlüssel-Wert-Paare mit dl, dt und dd auszeichnen
Listen zählen zu den grundlegenden Bausteinen in HTML. Jede:r Web-Entwickler:in kennt die HTML-Elemente <ul> und <ol> für ungeordnete und geordnete Listen. Doch wenige sind mit ihrem nahen Verwandten <dl> vertraut.
Diese sogenannte Description List umfasst eine Liste an Begriffen und Beschreibungen, die mit den HTML-Elementen <dt> und <dd> definiert werden. Üblicherweise wird es zur Anzeige eines Glossars oder von Metadaten (also einer Liste von Schlüssel-Wert-Paaren) genutzt.
<dl>
<dt>Kontoinhaber</dt>
<dd>Martina Musterfrau</dd>
<dt>Bankinstitut</dt>
<dd>Musterbank</dd>
<dt>IBAN</dt>
<dd>AT12 3456 7891 2345 6789</dd>
</dl>
Was macht das Element in meinen Augen so großartig? Erraten! Es macht den Inhalt barrierefrei für Screenreader zugänglich. Doch auch Web-Entwickler:innen profitieren davon. Stell dir das Beispiel oben als eine Abfolge von <div> Elementen vor und überlege, in welchen Code du dich schneller einlesen und zurechtfinden könntest. Semantisches HTML macht Code lesbarer!
Erstellt am