Hier sind einige weitere HTML5-Tags, die in den vorherigen Antworten noch nicht behandelt wurden:
1. <embed>
Das <embed>
-Tag wird verwendet, um externe Inhalte, wie z.B. Multimedia-Objekte, einzubetten. Es ersetzt weitgehend das ältere <object>
-Tag und bietet eine einfachere Möglichkeit, Inhalte wie Videos, PDFs oder Flash-Dateien einzubetten.
<embed src="example.pdf" type="application/pdf" width="600" height="400">
2. <source>
Das <source>
-Tag gibt mehrere Medienressourcen für <audio>
, <video>
und <picture>
-Elemente an. Es ermöglicht die Angabe von alternativen Formaten, um die Kompatibilität mit verschiedenen Browsern zu gewährleisten.
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
Ihr Browser unterstützt dieses Video-Format nicht.
</video>
3. <picture>
Das <picture>
-Tag ermöglicht es, verschiedene Versionen eines Bildes für unterschiedliche Bildschirmgrößen oder -auflösungen bereitzustellen. Dies ist besonders nützlich für responsive Webdesigns.
<picture>
<source media="(min-width: 650px)" srcset="large.jpg">
<source media="(min-width: 465px)" srcset="medium.jpg">
<img src="small.jpg" alt="Beispielbild">
</picture>
4. <nav>
Das <nav>
-Tag wird verwendet, um einen Abschnitt der Seite zu kennzeichnen, der Navigationslinks enthält. Es wurde entwickelt, um die Navigation von anderen Inhaltsarten zu unterscheiden.
<nav>
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
5. <track>
Das <track>
-Tag wird in Verbindung mit <audio>
und <video>
verwendet, um Textspuren wie Untertitel oder Beschriftungen bereitzustellen.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="Englisch">
Ihr Browser unterstützt dieses Video-Tag nicht.
</video>
6. <legend>
Das <legend>
-Tag wird verwendet, um eine Beschriftung für das <fieldset>
-Element bereitzustellen. Es hilft, Formularfelder semantisch zu gruppieren und zu beschriften.
<fieldset>
<legend>Persönliche Informationen</legend>
<label for="fname">Vorname:</label>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">Nachname:</label>
<input type="text" id="lname" name="lname">
</fieldset>
7. <output>
Das <output>
-Tag wird verwendet, um das Ergebnis einer Berechnung oder Benutzerinteraktion darzustellen.
<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>
8. <keygen>
(veraltet)
Das <keygen>
-Tag wurde verwendet, um ein Schlüsselpaar für die clientseitige Zertifikatsauthentifizierung zu generieren. Dieses Tag ist mittlerweile veraltet und wird in HTML5 nicht mehr empfohlen.
<form action="/submit-keys" method="post">
<keygen name="name">
<input type="submit">
</form>
9. <summary>
Das <summary>
-Tag wird zusammen mit dem <details>
-Tag verwendet, um einen zusammenklappbaren Bereich auf einer Webseite zu erstellen. Das <summary>
-Tag definiert den sichtbaren Titel oder die Überschrift des <details>
-Elements.
<details>
<summary>Mehr Informationen</summary>
<p>Hier sind die zusätzlichen Details, die ein- und ausgeblendet werden können.</p>
</details>
10. <command>
(veraltet)
Das <command>
-Tag wurde ursprünglich verwendet, um Schaltflächen, Kontrollkästchen oder Radio-Buttons zu definieren, die innerhalb von Menüelementen verwendet werden. Es ist jedoch veraltet und wird in aktuellen HTML5-Versionen nicht mehr unterstützt.
<!-- Nicht mehr unterstützt -->
<command type="command" label="Speichern" icon="save.png" onclick="saveFile()">
Hier sind noch einige weitere HTML5-Tags, die in den bisherigen Antworten nicht behandelt wurden:
11. <data>
Das <data>
-Tag verknüpft ein sichtbares Stück Text mit maschinenlesbaren Daten. Es eignet sich gut für die Darstellung von Daten, die sowohl für Menschen als auch für Maschinen verständlich sein müssen.
<p>Das Produkt kostet <data value="39.99">39,99 €</data>.</p>
12. <output>
Das <output>
-Tag zeigt das Ergebnis einer Berechnung oder einer Aktion des Benutzers an.
<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>
13. <kbd>
Das <kbd>
-Tag wird verwendet, um Text darzustellen, der eine Benutzereingabe auf der Tastatur widerspiegelt.
<p>Drücken Sie <kbd>Ctrl</kbd> + <kbd>C</kbd>, um den Text zu kopieren.</p>
14. <samp>
Das <samp>
-Tag wird verwendet, um Beispieldaten oder die Ausgabe eines Computerprogramms darzustellen.
<p>Die Ausgabe des Programms ist: <samp>Hello, World!</samp></p>
15. <progress>
Das <progress>
-Tag zeigt den Fortschritt einer Aufgabe an, z.B. das Laden einer Datei.
<label for="file">Datei-Upload:</label>
<progress id="file" value="32" max="100">32%</progress>
16. <wbr>
Das <wbr>
-Tag (Word Break Opportunity) gibt eine empfohlene Stelle für einen Zeilenumbruch an, wenn ein Wort zu lang ist.
<p>EinLangesWort<wbr>DasUmgebrochenWerdenKann.</p>
17. <var>
Das <var>
-Tag wird verwendet, um eine Variable in einer mathematischen Gleichung oder in einem Programm zu markieren.
<p>Die Fläche eines Kreises ist <var>πr²</var>.</p>
Diese Tags erweitern die Möglichkeiten von HTML5 erheblich und bieten Entwicklern mehr Flexibilität und Kontrolle bei der Gestaltung von Inhalten und der Verbesserung der Benutzererfahrung.