20 HTML5-Tags, die jeder Webentwickler kennen sollte

Wir sehen uns hier eine Liste von 20 HTML5-Tags an: einige davon sind geläufig, andere deutlich weniger. Dazu kommt jeweils, wie es um die Unterstützung in Chrome, Firefox, Safari und Internet Explorer steht.

8 Tags für die Seitenstruktur

Diese Tags sind vor allem dafür da, den Suchmaschinen das Lesen deiner Website zu erleichtern.

• <article> – Markiert die Stelle eines Artikels, eines Blog- oder Forenkommentars, er besteht in der Regel aus einer Überschrift und einem Absatz.
• <section> – Steht für einen thematischen Abschnitt. Ein <article> kann aus mehreren Themenblöcken (<section>) bestehen, und umgekehrt gilt dasselbe. Auch eine Section hat eine Überschrift und eine Einleitung, über das Attribut aria-label lässt sich ihr ein Label geben.
• <aside> – Definiert einen Abschnitt, der neben deinem Hauptinhalt steht, ideal für Sidebars oder Werbeflächen.
• <figure> – Figure ist ein Container, der mit <figcaption> zusammenarbeitet: figure zeigt ein Bild oder ein Video mit einer Bildunterschrift (<figcaption>).
• <footer> – Markiert den Fußbereich deiner Seite.
• <header> – Markiert den Kopfbereich deiner Seite.
• <hgroup> – Ein Tag, um mehrere Überschriften zu gruppieren (<h1> bis <h6>).
• <nav> – Steht für einen Abschnitt mit Links. Er wird oft im <header> für das Hauptmenü genutzt oder im <footer> für Impressum und Ähnliches.

4 Tags für Medien

• <video> – Zeigt einen Videoplayer in HTML5 an, die Quelle deines Videos gibst du über das Attribut src an.
• <audio> – Dasselbe wie beim vorherigen Tag, nur für eine Audiodatei.
• <picture> – Das unbekannteste Tag, weil es in manchen Browsern noch als experimentell gilt. Mit <picture> gibst du mehrere <source> für ein <img>-Element an, der Browser wählt dann je nach Auflösung das passende Bild aus.
• <source> – Definiert verschiedene Quellen für Mediendateien, nutzbar mit <video>, <audio> und <picture>.

8 funktionale Tags

• <details> – Gehört zu <summary>: Zusammen bauen sie einen aufklappbaren Inhalt.
  
  Details

  Mehr Infos zu den Details.

• <dialog> – Dialog ist ein natives modales Fenster in HTML5.

  Beispiel von Mozilla –

  von Damien Flandrin (@dam62500) auf CodePen.
• <embed> – Mit embed bekommst du einen Container für externe Ressourcen. Früher diente er vor allem für Flash, aber auch für SVG, auch wenn man dafür heute andere Wege bevorzugt.
• <mark> – Damit lässt sich Text hervorheben.
• <meter> – Steht für einen Messwert zwischen zwei festen Grenzen.

  Beispiel von Mozilla – von Damien Flandrin (@dam62500) auf CodePen.

• <progress> – Ähnlich wie <meter>, steht aber für einen Fortschritt in Prozent.

  Beispiel von Mozilla – von Damien Flandrin (@dam62500) auf CodePen.

• <time> – Bildet ein Datum semantisch ab und nimmt das Attribut datetime entgegen.
  htmlKopieren

  <p>Le concert a eu lieu le<time datetime="2001-05-15T19:00">15 Mai</time>.</p>

• <wbr> – Eines der unbekanntesten HTML5-Tags und trotzdem nützlich: <wbr> sagt dem Browser, dass er an dieser Stelle bei Bedarf umbrechen darf.

···