Seit HTML5: mehr Struktur
HTML-Elemente wie header , footer , article und section treten der Flut der div-Tags mitsamt ihren unzähligen CSS-Klassen in Webseiten gegenüber. Und da HTML-Elemente für die Struktur und nicht für die Darstellung verantwortlich sind, stellt sich die Frage nach der Unterstützung durch alte Browser nicht.
Frontend-Entwickler behalten einen besseren Überblick über den Aufbau der Seite. Die Semantik der HTML-Elemente erleichtert Suchmaschinen die Zuordnung der Webseite zu einem Thema.
HTML-Tags im head-Element
HTML und Metadaten
!DOCTYPE kein HTML-Element 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 im Navigationsfeld der Browser und wird im Index der Suchmaschinen übernommen 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
Bereiche für den Inhalt
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 Container für Überschriften h1 bis h6 und eng damit verbundenen Text header Einleitung des Dokuments footer Informationen im Fuß eines Artikels oder Beitrags address Kontaktinformationen für den Autor bzw. Inhaber der Seite
Struktur reinbringen
Inhalt gruppieren
main Hauptinhalt der Seite oder der Anwendung div Behälter ohne eigene Eigenschaften p Textabsatz hr Horizontale Linie pre Formatierter Text blockquote Zitat ol geordnete Liste ul Ungeordnete Liste li Listenelement menu Alternative zum ul-Element für eine ungeordnete Liste von Anweisungen (Toolbar oder Werkzeugleiste) dl Beginn einer Definitionsliste dt Begriff in einer Definitionsliste dd Erklärung in einer Definitionsliste figure Container für Bilder, Grafik und Abbildungen figcaption Bildunterschrift, Marginale, Erklärungen zum Inhalt des figure-Elements
Dem Text eine Bedeutung geben
Semantische Elemente für Text
a Anker oder Hyperlink: Was zwischen öffnendem und schließendem a-Tag sitzt, wird zu einem klickbaren Link em / i / strong / b leichte Betonung, starke Betonung small kleiner Text cite Kurzes Zitat q Hochkommas / Anführungszeichen dfn Definition abbr Abkürzung data Für Inhalte mit maschinenlesbarer Version im value-Attribut des öffnenden data-Tags 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 details umschließt ein Detail oder Informationen, die der Benutzer einsehen oder verbergen kann – ein Klappmenü 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-Elements. Heute mit der Bedeutung: nicht länger relevant oder gültig
Embedded: Bilder, Grafiken und Video
Medien einbetten
img Bild picture Alternative Bildformate source Verweis auf die Mediendateien eines video- bzw. audio-Elements 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 track Externe Spuren z.B. Untertitel für Video und Audio, Transcriptionen (Mitschriften) und Übersetzungen area map Bereiche einer Imagemap svg Bettet SVG-Grafik in HTML-Dokumente ein math Bettet Formeln in HTML-Dokumente ein
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
Scripte und interaktive Elemente
Script
script Aufruf eines Scripts noscript Altervativer Inhalt für Browser ohne Scriptunterstützung canvas erzeugt eine Zeichenfläche, die von Javascript mit Bildern gefüllt wird. template Das HTML template-Element ist für Javascript gedacht und fügt Struktur und Inhalt on the fly ein.
Interaktiv
details Zusätzliche Informationen, die der Benutzer sehen und verbergen kann summary Klickbare Überschrift für details dialog Öffnet eine Overlay oder modales Fenster
Deprecated – veraltete HTML-Elemente
Die folgenden Elemente aus alten HTML-Versionen sind nicht mehr vertreten und gelten als veraltet, unerwünscht oder missbilligt.
HTML-Element
Bedeutung, Aufgabe
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 kurzzeitig in HTML und verschwand wieder marquee erzeugt ein scrollendes Banner command kam kurzzeitig in HTML, wurde von den Browsern nicht implementiert und verschwand wieder aus der Spezifikation
Mehr zur Struktur von Webseiten
