Zum Inhalt springen

HTML-Referenz

508d351420074734bf834276fe4ba798 HTML-Referenz

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&gt…

base

Selbst-schliessend: Ja base Definiert die Basis-URL für alle relativen Links einer Web-Seite. Sollt…

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.

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…