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.