Quiz: Gehört HTML noch auf Ihren Lebenslauf?

Das <ul>-Tag erzeugt eine ungeordnete Liste, deren Einträge typischerweise durch Aufzählungspunkte gekennzeichnet sind.

Das <dd>-Element definiert eine Beschreibung, Definition oder einen Wert in einer Beschreibungsliste, die innerhalb von <dl>-Tags verwendet wird, um mit <dt> (Beschreibungsbegriff) zu paaren.

Dies ist nützlich, wenn Schlüssel-Wert-Daten angezeigt werden. Profilinformationen, Einstellungen und Statistiken sind häufige Beispiele.

<dl>
<dt>JS</dt>
<dd>Client-side</dd>
<dd>Server-side</dd>

<dt>HTML</dt>
<dd>Client-side</dd>
</dl>

Das <figure>-Tag wird typischerweise verwendet, um eigenständige (Medien-)Inhalte wie ein Bild oder Diagramm zusammen mit <figcaption> zu umschließen, um eine Bildunterschrift bereitzustellen.

Dies ist nützlich für Bilder, Diagramme, Codeausschnitte und mehr.

<figure>
<img src="../image.jpg" alt="Description of image">
<figcaption>Image caption</figcaption>
</figure>

Das <article>-Element wird verwendet, um einen eigenständigen Inhalt zu definieren, der unabhängig verteilt oder wiederverwendet werden kann.

Es wird oft für Blogbeiträge, Nachrichtenartikel, Forenbeiträge oder Benutzerkommentare verwendet.

Sie können mehrere article-Elemente auf einer Seite verwenden (z. B. für unendlich scrollende Seiten). Oder Sie können sie ineinander verschachteln, um eine Hierarchie von „eigenständigem Inhalt“ zu erstellen.

<article>
<h2>Article Title</h2>
<p>Article content...</p>
<article class="discussion">
<h3>Comment by User</h3>
<p>Comment content...</p>
</article>
</article>

<fieldset> wird verwendet, um verwandte Formularsteuerelemente zu gruppieren, und <legend> stellt einen Titel/eine Bezeichnung für die Gruppe bereit, was die Barrierefreiheit verbessert.

Dies ist nützlich, um verwandte Formularelemente zu gruppieren, wie z. B. einen Abschnitt für Lieferadresse oder Zahlungsdetails.

<fieldset>
<legend>Shipping Address</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
...
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<label for="card">Card Number:</label>
<input type="text" id="card" name="card">
...
</fieldset>

Das <meter>-Element wird verwendet, um eine skalare (einzelne) Messung innerhalb eines festgelegten Bereichs darzustellen, wie z. B. Temperatur, Festplattennutzung oder eine Stimmenauszählung.

Es mag einem <progress>-Balken ähneln, jedoch beginnen Fortschrittsbalken IMMER bei Null. Daher zeigen <progress>-Elemente einen Prozentsatz der Fertigstellung, während ein <meter> jeden Wert innerhalb eines definierbaren Bereichs anzeigt.

<meter min="-60" max="130" value="75" /> 75°F
<meter min="0" max="100" value="75" /> 75%

Das <source>-Element wird verwendet, um verfügbare Medienformate anzugeben.

Es wird speziell mit <video>, <audio> und <picture> verwendet, sodass der Browser das am besten geeignete Format auswählen kann.

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

Das <hgroup>-Element gruppiert eine Überschrift mit zugehörigem sekundärem Inhalt, normalerweise einem oder mehreren <p>-Elementen.

Es kann nützlich sein, wenn eine Überschrift einen Untertitel, einen Slogan oder einen alternativen Titel hat, der nicht zu einer weiteren Überschrift in der Dokumentgliederung werden soll.

<article>
<hgroup>
<h1>Frankenstein</h1>
<p>Or: The Modern Prometheus</p>
</hgroup>
<section>
<h2>Chapter 1</h2>
<p>...</p>
</section>
</article>

Das <menu> stellt eine Liste von Befehlen oder interaktiven Steuerelementen dar.

Wenn deine Liste aus Navigationslinks besteht, verwende <nav> mit einem <ul>. Verwende <menu> für toolbar-ähnliche Steuerelemente oder Befehlselemente.

<menu>
<li><button type="button">Copy</button></li>
<li><button type="button">Paste</button></li>
</menu>

<details> ermöglicht einklappbare Inhalte, und <summary> gibt einen sichtbaren Titel für den Inhalt an.

Dies ist nützlich für FAQs, einklappbare Abschnitte oder beliebige Inhalte, die umgeschaltet werden können.

<details>
<summary>Click to expand 🤯</summary>
<p>Hidden content! 💥</p>
</details>

Das <dialog>-Element wird für Pop-ups oder Modals verwendet und bietet semantisches Markup, erweitertes CSS und eine native API für diese Interaktionen.

Verwende JavaScript, um es mit .showModal() für modale Dialoge oder .show() für nicht-modale Dialoge zu öffnen, und schließe es mit .close() oder einer Formularübermittlung mit method="dialog".

<dialog>
<h2>Modal Title</h2>
<p>Modal content...</p>
<button>Close</button>
</dialog>

Das <time>-Element wird für Daten, Uhrzeiten oder Dauern verwendet. Es kann menschenlesbaren Inhalt und ein maschinenlesbares datetime-Attribut enthalten. HTML hat kein <date>-Element.

ARIA (Accessible Rich Internet Applications)-Attribute verbessern die Barrierefreiheit im Web, indem sie zusätzlichen Kontext für Screenreader und andere assistive Technologien bereitstellen.

Es gibt Rollen, Zustände und Eigenschaften, die verwendet werden können, um Elemente zu beschreiben.

<button aria-label="Close" aria-expanded="true">X</button>
<main aria-live="polite">...</main>
<dialog
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc"
></dialog>

Das role-Attribut beschreibt

den Zweck eines Elements für assistive Technologien und hilft so, die Barrierefreiheit zu verbessern.