Mehr Struktur
Die Tags aus HTML5 sind der Flut der div-Tags mitsamt unzähligen CSS-Klassen in Webseiten gegenüber getreten. Auch wenn sie von alten Browsern nicht unterstützt werden, können Tags wie article, nav, header und footer benutzt werden. Von allen modernen Browsern werden die HTML5-Tags unterstützt.
Frontend-Entwickler behalten einen besseren Überblick über den Aufbau der Seite. Die Semantik der HTML5-Tags erleichtert Suchmaschinen die Zuordnung der Webseite zu einem Thema.
Im Seitenkopf nichts Neues
HTML und Metadaten
| !DOCTYPE | kein HTML-Tag im strengen Sinne, sondern die Information für die Browser, um welche HTML-Version es sich bei der aktuellen Webseite handelt. |
| html | Kennzeichnet das Dokument als html-Dokument |
| head | Informationen, die nicht im Browserfenster dargestellt werden |
| title | Seitentitel, erscheint in der oberen Browserleiste |
| base | Basis-URL einer Webseite |
| link | erzeugt einen Link zwischen dem aktuellen und einem verwandten Dokument, z.B. für eine CSS-Datei |
| meta | Informationen, die nicht im Browserfenster dargestellt werden |
| style | Globale CSS-Stile, die innerhalb des Dokuments gelten |
Seitenbereiche festlegen
Sections
| body | Vom Browser darstellbare Inhalte |
| article | Inhalte, die unabhängig für sich allein stehen können |
| section | Unterteilt den Inhalt in Abschnitte, i.d.R. mit eigenem header und footer |
| nav | Haupt-Navigation mit Links zu anderen Seiten der Webseite |
| aside | Inhalte, die nicht zu den Hauptinhalten einer Seite zählen |
| h1, h2, h3, h4, h5, h6 | Überschriften |
| hgroup | Gruppieren |
| header | Einleitung des Dokuments |
| footer | Informationen im Fuß eines Artikels oder Beitrags |
| address | Kontaktinformationen für den Autor bzw. Inhalber der Seite |
Struktur reinbringen
Inhalt gruppieren
| div | Behälter ohne eigene Eigenschaften |
| p | Textabsatz |
| hr | Horizontale Linie |
| pre | Formatierter Text |
| blockquote | Zitat |
| ol | geordnete Liste |
| ul | Ungeordnete Liste |
| li | Listenelement |
| dl | Beginn einer Definitionsliste |
| dt | Begriff in einer Definitionsliste |
| dd | Erklärung in einer Definitionsliste |
| figure | Container für Bilder, Grafik und Abbildungen |
| main | Hauptinhalt der Seite oder der Anwendung |
Dem Text eine Bedeutung geben
Semantische Tags für Text
| a | Anker oder Hyperlink |
| em / i / strong / b | leichte Betonung, starke Betonung |
| small | kleiner Text |
| cite | Kurzes Zitat |
| q | Hochkommas / Anführungszeichen |
| dfn | Definition |
| abbr | Abkürzung |
| data | Daten mit maschinenlesbarer Version im value-Attribut |
| time | Datums- und Zeitangabe mit maschinenlesbarer Version im datetime-Attibut |
| code | Darstellung von Computer-Code |
| var | Darstellung als Variable in einem Programm |
| samp | Darstellung als Computercode |
| kbd | Darstellung für Tastatureingaben |
| sub / sup | tiefgestellter und hochgestellter Text |
| u | Text stylistisch (z.B. als falsche Rechtschreibung) absetzen |
| mark | Hebt einen Text gelb hinterlegt hervor |
| ruby / rt / rp / rb / rtc | Anmerkungen zur Aussprache / Erklärung in asiatischen Texten. |
| bdi | Laufrichtung der Schrift innerhalb eines Absatzes |
| bdo | Laufrichtung der Schrift |
| span | Generischer Behälter für Inline-Inhalte |
| br | Neue Zeile |
| wbr | Zeilenumbruch möglich |
Bearbeiten von Dokumenten
| del | Darstellung als gelöschter Text |
| ins | Darstellung als eingefügter Text |
| s | Nachfolger des veralteten strike-Tags. Heute mit der Bedeutung: nicht länger relevant oder gültig |
Medien einbetten
| img | Bild |
| picture | Alternative Bildformate |
| iframe | Fenster in ein anderes Dokument |
| embed | Einbetten von nicht-HTML-Inhalten über Plugins |
| object | Spielt extern gespeicherte Medien in die Webseite |
| param | Steueranweisungen für extern gespeicherte Medien |
| video | bettet Video in eine Webseite ein |
| audio | bettet Audio in eine Webseite ein |
| source | Verweis auf die Mediendatein eines video- bzw. audio-Tags |
| track | Externe Spuren z.B. Untertitel, Transcription (Mitschriften) und Übersetzungen |
| area map | Bereiche einer Imagemap |
| svg | Bettet SVG-Grafik in HTML-Dokumente ein |
| mathml | Bettet Formeln in HTML-Dokumente ein |
Tabellen
| table | Tabelle |
| caption | Kurzbeschreibung einer Tabelle |
| col | Tabellenspalte |
| colgroup | Tabellenspaltengruppe |
| tbody | Körper einer Tabelle |
| thead | Tabellenkopf |
| tbody | Tabellenfuß |
| td | Tabellenzelle |
| th | Kopfzelle einer Tabelle |
| tr | Tabellenreihe |
Formulare
| form | Behälter für ein Formular |
| fieldset | Behälter für Formularinhalte |
| label | Beschriftung eines Formularelements |
| legend | Beschriftung eines Formularbereichs |
| input | Eingabefeld |
| datalist | Eingabefeld |
| button | Schaltfläche |
| select | Behälter für eine Auswahlliste |
| option | Option einer Auswahlliste |
| optgroup | Optionsgruppe in einer Auswahlliste |
| textarea | Eingabefeld für lange Texte |
| output | Ausgabe einer Berechnung, die durch ein Script erzeugt wurde (z.B. aktueller Wert des range-Sliders) |
| progress | Fortschrittsbalken |
| meter | Wert innerhalb eines bestimmten Bereichs |
| keygen | Erzeugt ein Paar aus öffentlichem und privaten Schlüssel; versendet den öffentlichen Schlüssel |
Script
| noscript | Altervativer Inhalt für Browser ohne Scriptunterstützung |
| script | Aufruf eines Scripts |
| canvas | erzeugt eine Zeichenfläche, die von Javascript mit Bildern gefüllt wird. |
| template | Das HTML template-Tag ist für Javascript gedacht und fügt Struktur und Inhalt on the fly ein. |
Interaktive Elemente
| details | Zusätzliche Informationen, die der Benutzer sehen und verbergen kann |
| summery | Klickbare Überschrift für details |
| dialog | Öffnet eine Overlay oder modales Fenster |
Benutzerdefinierte HTML-Elemente
Daneben spricht nichts dagegen, eigene Elemente zu definieren: HTML Custom Elements oder benutzerdefinierte Elemente sind HTML-Tags mit einem eigenen Namen. Wichtig ist erst einmal, dass die Namen der selbstdefinierten Elemente mit einem Bindestrich geschrieben werden.
<flex-box>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-box>
Custom Elements sind Elemente ohne Eigenschaft – sie erben keine Vorgaben wie margin oder width. Sie lassen sich mit CSS stylen und mit Javascript ansprechen. Ein klug vergebener Name hebt sie von ihrer Umgebung ab, so dass Blöcke wie z.B. eine Flexbox direkt in das Markup geschoben werden kann. Sie kapseln Struktur, Aussehen und auch Verhalten mit Javascript von ihrer Umgebung ab.
Custom Elements sind Teil der Web Components.
Ausgestorbene Elemente
Die folgenden Elemente aus XHTML / HTML4 sind in HTML5 nicht mehr vertreten und gelten als veraltet, unerwünscht oder missbilligt.
Ausgestorben
| acronym | Alternative Bezeichnung |
| big | großer Text |
| tt | Darstellung als Teletext |
| frameset | Kennzeichnet ein Dokument als Frameset |
| frame | einzelner Rahmen |
| noframes | Inhalte für Browser, die keine Frames darstellen |
| bb | Browser Button, kam in HTML5 und verschwand wieder |
| marquee | erzeugt ein scrollendes Banner |
| hgroup | kam in HTML5 und verschwand wieder |
| command | kam in HTML5, wurde von den Browsern nicht implementiert und verschwand wieder aus der Spezifikation |
