Die HTML-Referenz ist eine Liste aller HTML 5.0-Elemente, die es gibt. Zu jedem Element finden Sie einen Übersichtsartikel, in dem das Element beschrieben ist, was es bedeutet, welche Eigenschaften das Element hat und Beispiele, wie das aussieht. Sie finden hier alle Informationen, die Sie brauchen, um HTML 5 zu benutzen.
HTML (Hypertext Markup Language) zählt zu den Auszeichnungs- oder Markupsprachen. Das bedeutet, mit ihr können so genannte Webseiten „gesetzt“ werden. Die Sprache HTML dient nicht zur Gestaltung von Webseiten. HTML dient nur dazu, Inhalte aufzubereiten und zu strukturieren. Der Rest geschieht anschließend mit CSS.
Einführung in HTML 5
Hier ein Auszug aus dem Buch „Little Boxes“ von Peter Müller:
HTML ist der Maurer, der das Haus und die Zimmeraufteilung anlegt. Mit HTML werden die rechteckigen Kästchen erstellt und mit Inhalt gefüllt.
CSS ist der Dekorateur, der Haus und Zimmer gestaltet. Mit CSS werden Kästchen und Inhalt gestaltet und positioniert.
https://little-boxes.de
Mit HTML wird also auch nicht das Layout erstellt!
HTML basiert vom Anfang bis zum Ende auf so genannten Tags. Tags sind recht einfach zu verstehen.
Ein Tag hat die folgende Struktur:
<tag>
Das kleiner-als-Zeichen <
zeigt an, dass ein neues Tag beginnt. „tag“ bezeichnet den Namen, zum Beispiel body
und das größer-als-Zeichen >
beendet das öffnende Tag.
inhalt
Darauf folgt der Inhalt des Tags. Das kann einfacher Text sein, oder andere Tags, wie Bilder, Absätze, Überschriften, etc.
</tag>
Der Schließende Tag ist dann genauso aufgebaut, wie der öffnende, nur, dass sich vor dem Namen des Tags noch ein Slash /
steht.
Jeder Inhalt einer Webseite steht also zwischen einem öffnenden und einem schließenden Tag.
Jedes Mal, wenn ein Tag geöffnet wird <tag>
, wird im Browser quasi ein Rechteck erstellt. Dieses Rechteck endet, sobald man des Tag wieder schließt </tag>
. Eine Webseite besteht also – aus der Sicht des Browsers aus vielen rechteckigen Kästchen, die dann per CSS positioniert und gestaltet werden.
Tags, die weitere Eigenschaften, sogenannte Attribute enthalten, sehen in HTML so aus:
<tag attribut="wert">Inhalt</tag>
Als Beispiel nehmen wir ein Bild. Der Tag für ein Bild heißt <img>
(Abkürzung für Image). Dieser Tag verlangt zwingend Attribute, in diesem Fall die URL, unter der das Bild geladen werden kann:
<img src="images/bild.jpg" />
Der eigentliche Inhalt dieses Tags ist, wie man sieht, leer. Solche Tags werden auch „selbstschließende Tags“ genannt. Das Bild selbst ist bereits der Inhalt, der an der Stelle angezeigt wird. Ein <img>
Tag kann also keinen Text enthalten.
Collections
Elemente
a
Typ: inline Selbst-schliessend: Nein a Erzeugt einen Link zu einer URL: einer Webseite, einem Absch…
abbr
Typ: inline Selbst-schliessend: Nein abbr Definiert eine Abkürzung und enthält in der Regel ihre vo…
address
Typ: block Selbst-schliessend: Nein address Definiert einen Block für Kontaktinformationen. Beispie…
area
Typ: inline Selbst-schliessend: Nein area Definiert einen interaktiven Bereich innerhalb einer map.…
article
Typ: block Selbst-schliessend: Nein article Definiert einen in sich geschlossenen Inhaltsblock, de…
aside
Typ: block Selbst-schliessend: Nein aside Definiert einen Inhaltsblock, der mit dem Hauptinhalt in…
audio
Typ: block Selbst-schliessend: Nein audio Ermöglicht das Einbetten eines Audioclips in eine Websei…
b
Typ: inline Selbst-schliessend: Nein b Macht ein Element fett. Beispiel: Hello World Hello <b>…
bdi
Typ: inline Selbst-schliessend: Nein bdi Ermöglicht es, einen Teil eines Textes in der gegensätzlic…
bdo
Typ: inline Selbst-schliessend: Nein bdo Ermöglicht es, die Richtung des Textes außer Kraft zu setz…
blockquote
Typ: blockSelbst-schliessend: Nein blockquote Definiert ein langes Zitat. Beispiel: Be less curious …
body
Typ: block Selbst-schliessend: Nein body Der Container für den Inhalt einer Webseite. Muss ein dire…
br
Typ: inline Selbst-schliessend: Ja br Definiert einen Zeilenumbruch innerhalb eines Textes. Beispie…
button
Typ: inline Selbst-schliessend: Nein button Definiert einen klickbaren Button. Beispiel: Submit for…
canvas
Typ: block Selbst-schliessend: Nein canvas Definiert ein Element, in dem Sie Grafiken zeichnen kön…
caption
Typ: block Selbst-schliessend: Nein caption Definiert den Titel einer <Tabelle>. Beispiel: Th…
cite
Typ: inline Selbst-schliessend: Nein cite Definiert die Quelle eines kreativen Werks. Beispiel: If …
code
Typ: inline Selbst-schliessend: Nein code Definiert einen Ausschnitt von Code innerhalb eines Textb…
col
Typ: inline Selbst-schliessend: Ja col Definiert eine Spalte innerhalb einer Tabelle. Beispiel: Joh…
colgroup
Typ: block Selbst-schliessend: Nein colgroup Definiert eine Gruppe von Spalten innerhalb einer Tabe…
data
Typ: inline Selbst-schliessend: Nein data Definiert Inhalte, die mit maschinenlesbaren Ausgaben ver…
datalist
Typ: block Selbst-schliessend: Nein datalist Definiert eine Liste von Optionen zur automatischen V…
dd
Typ: inline Selbst-schliessend: Nein dd Definiert ein Element in einer Definitionsliste. Beispiel: …
del
Typ: inline Selbst-schliessend: Nein del Definiert den Text, der gelöscht wurde. Beispiel: To write…
details
Typ: block Selbst-schliessend: Nein details Definiert einen umschaltbaren Inhaltsblock mit einer Z…
dfn
Typ: inline Selbst-schliessend: Nein dfn Legt fest, wo ein Begriff innerhalb einer Webseite definie…
dialog
Typ: block Selbst-schliessend: Nein dialog Experimental Definiert ein Dialogfeld, das mit JavaScri…
div
Typ: block Selbst-schliessend: Nein div Definiert einen generischen Block von Inhalten, der keinen …
dl
Typ: block Selbst-schliessend: Nein dl Definiert eine Definitionsliste. Beispiel: Web The part of t…
dt
Selbst-schliessend: Nein dt Definiert einen Definitionsbegriff. Beispiel: Web The part of the Inter…
em
Typ: inline Selbst-schliessend: Nein em Definiert die Hervorhebung von Text. Wird in der Regel als …
embed
Typ: block Selbst-schliessend: Ja embed Definiert einen Container für eine externe Anwendung. Beisp…
fieldset
Typ: block Selbst-schliessend: Nein fieldset Definiert eine Gruppe von Steuerelementen innerhalb ei…
figcaption
Typ: block Selbst-schliessend: Nein figcaption Definiert die Beschriftung einer <figure>. Be…
figure
Typ: block Selbst-schliessend: Nein figure Definiert ein einzelnes, in sich geschlossenes Element,…
footer
Typ: block Selbst-schliessend: Nein footer Definiert die Fußzeile einer Webseite oder eines Abschn…
form
Typ: block Selbst-schliessend: Nein form Definiert ein interaktives Formular mit Steuerelementen. B…
h1
Typ: block Selbst-schliessend: Nein # h1 Definiert eine Abschnittsüberschrift der Ebene eins: die h…
h2
Typ: block Selbst-schliessend: Nein # h2 Definiert eine Abschnittsüberschrift der Ebene Zwei. Beisp…
h3
Typ: block Selbst-schliessend: Nein # h3 Definiert eine Abschnittsüberschrift der Ebene drei. Beisp…
h4
Typ: block Selbst-schliessend: Nein # h4 Definiert eine Abschnittsüberschrift der Ebene vier. Beisp…
h5
Typ: block Selbst-schliessend: Nein # h5 Definiert eine Abschnittsüberschrift der Ebene fünf. Beisp…
h6
Typ: block Selbst-schliessend: Nein # h6 Definiert eine Abschnittsüberschrift der Ebene sechs: die …
head
Typ: block Selbst-schliessend: Nein head Definiert einen Container für die Metadaten einer Webseite…
header
Typ: block Selbst-schliessend: Nein header Definiert die Kopfzeile einer Webseite oder eines Absch…
hgroup
Typ: block Selbst-schliessend: Nein hgroup Experimental Definiert die Überschrift eines Abschnitts.…
hr
Selbst-schliessend: Ja hr Definiert einen semantischen Bruch zwischen Textblöcken. Er wird oft als …
html
Typ: block Selbst-schliessend: Nein html Definiert das Wurzelelement eines HTML-Dokuments. Alle and…
i
Typ: inline Selbst-schliessend: Nein i Macht ein Element kursiv. Beispiel: Hello World Hello <i&…
iframe
Typ: block Selbst-schliessend: Nein iframe Definiert einen Container für einen verschachtelten Brow…
img
Typ: inline Selbst-schliessend: Ja img Definiert ein Bild, das in die Webseite eingefügt wird. Beis…
input
Typ: inline Selbst-schliessend: Ja input Definiert ein interaktives Steuerelement innerhalb eines W…
ins
Typ: inline Selbst-schliessend: Nein ins Definiert den Text, der eingefügt wurde. Beispiel: To writ…
kbd
Typ: inline Selbst-schliessend: Nein kbd Definiert einen Ausschnitt der Benutzereingabe. Beispiel: …
label
Typ: inline Selbst-schliessend: Nein label Definiert ein Label für ein Formularsteuerelement. Beisp…
legend
Typ: block Selbst-schliessend: Nein legend Definiert eine Beschriftung für den Inhalt eines Elternt…
li
Selbst-schliessend: Nein li Definiert ein Listenelement innerhalb einer geordneten Liste <ol>…
link
Selbst-schliessend: Nein link Definiert einen Link zwischen der aktuellen Webseite und einem extern…
main
Typ: block Selbst-schliessend: Nein main Definiert den Hauptinhalt einer Webseite. Kann mit einer …
map
Typ: block Selbst-schliessend: Nein map Definiert eine interaktive Karte über ein Bild. Beispiel: &…
mark
Typ: inline Selbst-schliessend: Nein mark Definiert hervorgehobenen Text. Beispiel: We use HTML5 t…
meta
Selbst-schliessend: Nein meta Definiert Metadaten, die an eine Webseite angehängt sind. Beispiel: &…
meter
Typ: block Selbst-schliessend: Nein meter Definiert einen horizontalen Zähler. Beispiel: Progress …
nav
Typ: block Selbst-schliessend: Nein nav Definiert einen Abschnitt mit Navigationslinks. Beispiel: …
noframes
Typ: block Selbst-schliessend: Nein noframes Definiert den Inhalt, der angezeigt wird, wenn der Bro…
noscript
Typ: block Selbst-schliessend: Nein noscript Definiert den Inhalt, der angezeigt wird, wenn der Bro…
object
Typ: block Selbst-schliessend: Nein object Definiert einen Container für eine externe Ressource. Be…
ol
Typ: block Selbst-schliessend: Nein ol Definiert eine geordnete Liste. Beispiel: Step one Step two …
optgroup
Typ: block Selbst-schliessend: Nein optgroup Definiert eine Gruppe von <option> Elementen. Be…
option
Selbst-schliessend: Nein option Definiert eine Option innerhalb eines <select> Dropdowns. Bei…
output
Typ: inline Selbst-schliessend: Nein output Definiert das Ergebnis einer Berechnung oder einer Benu…
p
Typ: block Selbst-schliessend: Nein p Definiert einen einfachen Absatz von Text. Beispiel: Hello Wo…
param
Selbst-schliessend: Ja param Definiert einen Parameter für ein <object> Element. Beispiel: Yo…
picture
Selbst-schliessend: Nein picture Experimental Definiert einen Container für Quellen eines <img&…
pre
Typ: block Selbst-schliessend: Nein pre Definiert vorformatierten Text. Beispiel: <!DOCTYPE html…
progress
Typ: block Selbst-schliessend: Nein progress Definiert einen Fortschrittsbalken. Beispiel: Progres…
q
Typ: inline Selbst-schliessend: Nein q Definiert ein kurzes Zitat. Beispiel: He looks around and sa…
rp
Typ: inline Selbst-schliessend: Nein rp Definiert den Inhalt, der angezeigt wird, wenn der Browser …
rt
Typ: inline Selbst-schliessend: Nein rt Definiert die Aussprache von Ruby-Kommentaren. Beispiel: 漢 …
rtc
Typ: inline Selbst-schliessend: Nein rtc Definiert einen Text-Container innerhalb von Ruby-Anmerkun…
ruby
Typ: block Selbst-schliessend: Nein ruby Definiert eine Ruby-Anmerkung zur Anzeige der Aussprache o…
s
Typ: inline Selbst-schliessend: Nein s Definiert durchgestrichenen Text. Beispiel: Alex is 37 38 ye…
samp
Typ: inline Selbst-schliessend: Nein samp Definiert eine Beispielausgabe von einem Computerprogramm…
script
Selbst-schliessend: Nein script Definiert einen Container für ein externes Skript. Beispiel: <sc…
section
Typ: block Selbst-schliessend: Nein section Definiert einen Abschnitt innerhalb einer Webseite. Be…
select
Typ: block Selbst-schliessend: Nein select Definiert ein Auswahl Dropdown mit verschiedenen <opt…
slot
Typ: inline Selbst-schliessend: Nein slot Experimental Definiert einen Container für user markup. W…
small
Typ: inline Selbst-schliessend: Nein small Definiert Kleingedrucktes, für weniger wichtige Inhalte.…
source
Selbst-schliessend: Ja source Definiert eine Quelle für ein <audio>, <video>, oder <…
span
Typ: inline Selbst-schliessend: Nein span Definiert einen generischen Inline-Container für Inhalte,…
strong
Typ: inline Selbst-schliessend: Nein strong Legt eine fette Hervorhebung für Texte fest. Beispiel: …
style
Selbst-schliessend: Nein style Definiert einen Container zum Hinzufügen von CSS innerhalb einer Web…
sub
Typ: inline Selbst-schliessend: Nein sub Definiert den Text, der tiefgestellt werden soll. Beispiel…
summary
Typ: block Selbst-schliessend: Nein summary Definiert die Zusammenfassung eines <details> El…
sup
Typ: inline Selbst-schliessend: Nein sup Definiert Text, der höhergestellt angezeigt werden soll. B…
table
Typ: block Selbst-schliessend: Nein table Definiert einen Container für Tabellendaten. Beispiel: Na…
tbody
Typ: block Selbst-schliessend: Nein tbody Definiert eine Gruppe von Tabellenzeilen <tr>. Beis…
td
Selbst-schliessend: Nein td Definiert eine Tabellenzelle. Muss ein direktes Kind einer <tr> s…
template
Typ: block Selbst-schliessend: Nein template Experimental Definiert einen Platzhalter für Inhalte, …
textarea
Typ: inline Selbst-schliessend: Nein textarea Definiert ein Mehrzeiliges Text-Steuerelement innerha…
tfoot
Typ: block Selbst-schliessend: Nein tfoot Definiert eine Gruppe von Tabellenzeilen <tr> am En…
th
Selbst-schliessend: Nein th Definiert eine Tabellenüberschrift. Muss ein direktes Kind einer <tr…
thead
Typ: block Selbst-schliessend: Nein thead Definiert eine Gruppe von Tabellenzeilen <tr> am An…
time
Typ: inline Selbst-schliessend: Nein time Definiert eine Zeit auf einer 24h-Uhr. Beispiel: The gam…
title
Selbst-schliessend: Nein title Definiert den Titel der Webseite, der auf der Registerkarte des Brow…
tr
Selbst-schliessend: Nein tr Definiert eine Tabellenzeile. Beispiel: World Cup winners Location Scor…
track
Selbst-schliessend: Ja track Definiert text tracks (wie Untertitel) für <audio> und <video…
u
Typ: inline Selbst-schliessend: Nein u Macht den Text eines Elements unterstrichen. Beispiel: Hello…
ul
Typ: block Selbst-schliessend: Nein ul Definiert eine ungeordnete Liste. Beispiel: My shopping list…
var
Typ: inline Selbst-schliessend: Nein var Definiert eine Variable in einem mathematischen oder progr…
video
Typ: block Selbst-schliessend: Nein video Ermöglicht das Einbetten eines Videoclips in eine Websei…
wbr
Typ: inline Selbst-schliessend: Nein wbr Experimental Definiert eine Stelle innerhalb eines Textbl…