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
HTML5 SHIV / SHIM: Browser Support
Heute stellen alle modernen Browser Seiten mit HTML5-Tags korrekt dar. Internet Explorer bis Version 8 hingegen konnte mit HTML5-Tags nichts anfangen. Damit Webdesigner nicht 10 Jahre warten mussten, bereitete html5shiv das HTML5-Markup für alte Browser auf:
<script src="html5shiv.js"></script>
Der Gedanke hinter diesem Javascript: Wenn ein Element mit document.createElement("ELEM") erzeugt wird, wirkt CSS auch auf HTML-Tags, die vom Browser nicht unterstützt werden. HTML5 SHIV (oder SHIM) ist heute in Modernizr integriert.
Heute macht es keinen Sinn mehr, alte Browser mitzuziehen, die von ihren Herstellern schon längst nicht unterstützt werden.
Ausgestorbene Elemente
Die folgenden Elemente aus XHTML / HTML4 sind in HTML5 nicht mehr vertreten und gelten als 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
SITEMAP HTML
HTML-Tags, Struktur und Attribute
Grundlagen: HTML Tags und Struktur
HTML-doctype, head und body
Korrektes valides HTML
HTML Formatierung durch den Browser
HTML-Attribute
Übersicht Attribute 1
Übersicht Attribute 2
Liste der HTML Tags
HTML manifest Application Cache
head und Metadaten
HTML Doctype
html Wurzelelement des Dokuments
head Kopf des Dokuments
meta Informationen zum Dokument
JSON-LD Metadaten im Päckchen
link-Tag CSS einbinden
title-Tag Die wichtigste Überschrift
style-Tag CSS in head / body
base Basis-Adresse (URL)
Inhalt strukturieren
body Sichtbarer Bereich der HTML-Seite
Struktur article, section, header
h Überschriften h1, h2, h3, h4, h5 und h6
main Hauptinhalt der Seite
aside »Am Rande«
address Hervorhebung von Adressen
hr Horizontale Linie
Inhalt gruppieren
div Behälter für Inhalte
span organisiert Inline-Elemente
dl Definitionslisten
figure figcaption Abbildungen
p Absatz in einem Text
pre Computercode
ul Listen
ol automatisch nummerierte Aufzählungen
blockquote Ausführliches Zitat
Text-Auszeichnung und Phrase-Tags
a Link (Ankertag)
bdo | bdi Laufrichtung des Textes
br Zeilenvorschub ohne Formatwechsel
details und summary, mark, dialog
del, ins gelöscht, geändert
sub + sup | big + small
time | Zeitangaben
abbr Abkürzung
cite Zitat (inline)
code, dfn, var • technischer Text
em, strong, i und b Betonung, fett und kursiv
Medien: img, video, iframe
img Bilder in Webseiten einfügen
srcset img-Tag-Attribut für versch. Monitore
picture Container für alternative Bildgrößen
Video / Audio für Webseiten
HTML Video-Tracks – Untertitel
object Medien anzeigen
area map Bild in Image Map unterteilen
iframe • Inline-Fenster
frame • frameset • noframes (nicht HTML5)
Formulare
form HTML Formular
input Formular – Eingabefeld
Attribute für input-Elemente
input autocomplete, placeholder, focus
input pattern Formulare validieren
input checkbox, radio, image, button
input type date, color, number
input type range
type=submit Formular absenden
Weitere Formularfelder
button Schaltfläche
select Auswahlliste
option / optgroup Optionen einer Selectliste
textarea Feld für lange Texte
fieldset / legend • Eingabefelder gruppieren
label Name eines Formularelements
progress, meter, output Benutzerhilfen
Beispiel HTML-Formular und PHP-Skript
Tabellen
table HTML-Tabellen
tr • Tabellenzeile
td / th • Tabellenzellen
caption • Überschrift einer Tabelle
colgroup, col Tabellenspalten gruppieren
thead, tfoot, tbody • Tabellen strukturieren
Scripting
script Script in HTML einbinden
template-Tag Vorlage für Scripte
noscript Ohne Scriptunterstützung
HTML 5 canvas Zeichnen mit Javascript
