Neben den bereits genannten Tags hat HTML5 eine Reihe weiterer neuer Tags eingeführt, die das Schreiben von semantisch sinnvolleren, strukturierteren und funktionaleren Webseiten erleichtern. Hier sind einige weitere wichtige HTML5-Tags:
1. <aside>
Das <aside>-Tag wird verwendet, um Inhalte zu kennzeichnen, die mit dem Hauptinhalt der Seite in Verbindung stehen, aber nicht direkt Teil davon sind. Typische Beispiele sind Seitenleisten oder zusätzliche Informationen.
<article>
<h2>Hauptartikel</h2>
<p>Dies ist der Hauptinhalt des Artikels.</p>
<aside>
<h3>Zusätzliche Informationen</h3>
<p>Dies sind verwandte Inhalte, wie z.B. ein Zitat oder eine Verlinkung.</p>
</aside>
</article>
2. <figure> und <figcaption>
Das <figure>-Tag wird verwendet, um in sich geschlossene Inhalte, wie Bilder, Diagramme oder Illustrationen, zu gruppieren. Das <figcaption>-Tag bietet eine Beschriftung für das <figure>-Element.
<figure>
<img src="landschaft.jpg" alt="Eine schöne Landschaft">
<figcaption>Bild 1: Eine malerische Landschaft in den Bergen.</figcaption>
</figure>
3. <mark>
Das <mark>-Tag hebt Text hervor, der für die aktuelle Seite oder den aktuellen Kontext besonders relevant ist, ähnlich wie ein Textmarker.
<p>Dieser Satz enthält ein <mark>wichtiges Schlüsselwort</mark>, das hervorgehoben werden sollte.</p>
4. <time>
Das <time>-Tag wird verwendet, um Daten und Uhrzeiten zu markieren. Dies ist besonders nützlich für Ereignisse oder andere zeitbezogene Informationen.
<p>Das Ereignis findet am <time datetime="2024-08-14">14. August 2024</time> statt.</p>
5. <progress>
Das <progress>-Tag zeigt den Fortschritt einer Aufgabe, wie das Laden einer Datei, an. Es stellt eine visuelle Fortschrittsanzeige dar.
<label for="file">Datei-Upload:</label>
<progress id="file" value="32" max="100">32%</progress>
6. <output>
Das <output>-Tag wird verwendet, um das Ergebnis einer Berechnung oder einer Benutzerinteraktion anzuzeigen.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="50">
= <output name="result" for="a b">100</output>
</form>
7. <details> und <summary>
Das <details>-Tag ermöglicht es, Informationen zu verstecken, die durch Klicken auf das <summary>-Tag angezeigt werden können. Dies eignet sich hervorragend für ausklappbare Details.
<details>
<summary>Klicken Sie hier für mehr Informationen</summary>
<p>Hier sind zusätzliche Details, die zunächst versteckt sind.</p>
</details>
8. <datalist>
Das <datalist>-Tag definiert eine Liste von vordefinierten Optionen, die in einem <input>-Element zur Verfügung stehen. Es ermöglicht dem Benutzer, Eingaben aus einer Liste auszuwählen oder selbst einzugeben.
<label for="browser">Wählen Sie Ihren Browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
9. <bdi>
Das <bdi>-Tag (Bi-Directional Isolation) wird verwendet, um Text in eine unabhängige Richtung zu isolieren, was besonders bei der Darstellung von Text in verschiedenen Sprachen nützlich ist.
<p>Benutzername: <bdi>علي</bdi></p>
10. <wbr>
Das <wbr>-Tag (Word Break Opportunity) zeigt eine mögliche Stelle für einen Zeilenumbruch an, falls das Wort zu lang ist und umgebrochen werden muss.
<p>DiesesLangeWort<wbr>istSchwerUmzubrechen.</p>
Diese neuen HTML5-Tags tragen dazu bei, dass Webseiten semantisch aussagekräftiger, barrierefreier und benutzerfreundlicher werden. Sie ermöglichen es Entwicklern, Inhalte klarer zu strukturieren und erweiterte Funktionen direkt im Browser bereitzustellen.
