Weitere wichtige HTML5-Tags Teil4

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.