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
Typ: inline Selbst-schliessend: Nein a Erzeugt einen Link zu einer URL: einer Webseite, einem Absch…
Typ: inline Selbst-schliessend: Nein abbr Definiert eine Abkürzung und enthält in der Regel ihre vo…
Typ: block Selbst-schliessend: Nein address Definiert einen Block für Kontaktinformationen. Beispie…
Typ: inline Selbst-schliessend: Nein area Definiert einen interaktiven Bereich innerhalb einer map .…
Typ: block Selbst-schliessend: Nein article Definiert einen in sich geschlossenen Inhaltsblock, de…
Typ: block Selbst-schliessend: Nein aside Definiert einen Inhaltsblock, der mit dem Hauptinhalt in…
Typ: block Selbst-schliessend: Nein audio Ermöglicht das Einbetten eines Audioclips in eine Websei…
Typ: inline Selbst-schliessend: Nein b Macht ein Element fett. Beispiel: Hello World Hello <b>…
Selbst-schliessend: Ja base Definiert die Basis-URL für alle relativen Links einer Web-Seite. Sollt…
Typ: inline Selbst-schliessend: Nein bdi Ermöglicht es, einen Teil eines Textes in der gegensätzlic…
Typ: inline Selbst-schliessend: Nein bdo Ermöglicht es, die Richtung des Textes außer Kraft zu setz…
Typ: block Selbst-schliessend: Nein blockquote Definiert ein langes Zitat. Beispiel: Be less curiou…
Typ: block Selbst-schliessend: Nein body Der Container für den Inhalt einer Webseite. Muss ein dire…
Typ: inline Selbst-schliessend: Ja br Definiert einen Zeilenumbruch innerhalb eines Textes. Beispie…
Typ: inline Selbst-schliessend: Nein button Definiert einen klickbaren Button. Beispiel: Submit for…
Typ: block Selbst-schliessend: Nein canvas Definiert ein Element, in dem Sie Grafiken zeichnen kön…
Typ: block Selbst-schliessend: Nein caption Definiert den Titel einer <Tabelle>. Beispiel: Th …
Typ: inline Selbst-schliessend: Nein cite Definiert die Quelle eines kreativen Werks. Beispiel: If …
Typ: inline Selbst-schliessend: Nein code Definiert einen Ausschnitt von Code innerhalb eines Textb…
Typ: inline Selbst-schliessend: Ja col Definiert eine Spalte innerhalb einer Tabelle. Beispiel: Joh…
Typ: block Selbst-schliessend: Nein colgroup Definiert eine Gruppe von Spalten innerhalb einer Tabe…
Typ: inline Selbst-schliessend: Nein data Definiert Inhalte, die mit maschinenlesbaren Ausgaben ver…
Typ: block Selbst-schliessend: Nein datalist Definiert eine Liste von Optionen zur automatischen V…
Typ: inline Selbst-schliessend: Nein dd Definiert ein Element in einer Definitionsliste. Beispiel: …
Typ: inline Selbst-schliessend: Nein del Definiert den Text, der gelöscht wurde. Beispiel: To write…
Typ: block Selbst-schliessend: Nein details Definiert einen umschaltbaren Inhaltsblock mit einer Z…
Typ: inline Selbst-schliessend: Nein dfn Legt fest, wo ein Begriff innerhalb einer Webseite definie…
Typ: block Selbst-schliessend: Nein dialog Experimental Definiert ein Dialogfeld, das mit JavaScri…
Typ: block Selbst-schliessend: Nein div Definiert einen generischen Block von Inhalten, der keinen …
Typ: block Selbst-schliessend: Nein dl Definiert eine Definitionsliste. Beispiel: Web The part of t…
Selbst-schliessend: Nein dt Definiert einen Definitionsbegriff. Beispiel: Web The part of the Inter…
Typ: inline Selbst-schliessend: Nein em Definiert die Hervorhebung von Text. Wird in der Regel als …
Typ: block Selbst-schliessend: Ja embed Definiert einen Container für eine externe Anwendung. Beisp…
Typ: block Selbst-schliessend: Nein fieldset Definiert eine Gruppe von Steuerelementen innerhalb ei…
Typ: block Selbst-schliessend: Nein figcaption Definiert die Beschriftung einer <figure >. Be…
Typ: block Selbst-schliessend: Nein figure Definiert ein einzelnes, in sich geschlossenes Element,…
Typ: block Selbst-schliessend: Nein footer Definiert die Fußzeile einer Webseite oder eines Abschn…
Typ: block Selbst-schliessend: Nein form Definiert ein interaktives Formular mit Steuerelementen. B…
Typ: block Selbst-schliessend: Nein # h1 Definiert eine Abschnittsüberschrift der Ebene eins: die h…
Typ: block Selbst-schliessend: Nein # h2 Definiert eine Abschnittsüberschrift der Ebene Zwei. Beisp…
Typ: block Selbst-schliessend: Nein # h3 Definiert eine Abschnittsüberschrift der Ebene drei. Beisp…
Typ: block Selbst-schliessend: Nein # h4 Definiert eine Abschnittsüberschrift der Ebene vier. Beisp…
Typ: block Selbst-schliessend: Nein # h5 Definiert eine Abschnittsüberschrift der Ebene fünf. Beisp…
Typ: block Selbst-schliessend: Nein # h6 Definiert eine Abschnittsüberschrift der Ebene sechs: die …
Typ: block Selbst-schliessend: Nein head Definiert einen Container für die Metadaten einer Webseite…
Typ: block Selbst-schliessend: Nein header Definiert die Kopfzeile einer Webseite oder eines Absch…
Typ: block Selbst-schliessend: Nein hgroup Experimental Definiert die Überschrift eines Abschnitts.…
Selbst-schliessend: Ja hr Definiert einen semantischen Bruch zwischen Textblöcken. Er wird oft als …
Typ: block Selbst-schliessend: Nein html Definiert das Wurzelelement eines HTML-Dokuments. Alle and…
Typ: inline Selbst-schliessend: Nein i Macht ein Element kursiv. Beispiel: Hello World Hello <i&…
Typ: block Selbst-schliessend: Nein iframe Definiert einen Container für einen verschachtelten Brow…
Typ: inline Selbst-schliessend: Ja img Definiert ein Bild, das in die Webseite eingefügt wird. Beis…
Typ: inline Selbst-schliessend: Ja input Definiert ein interaktives Steuerelement innerhalb eines W…
Typ: inline Selbst-schliessend: Nein ins Definiert den Text, der eingefügt wurde. Beispiel: To writ…
Typ: inline Selbst-schliessend: Nein kbd Definiert einen Ausschnitt der Benutzereingabe. Beispiel: …
Typ: inline Selbst-schliessend: Nein label Definiert ein Label für ein Formularsteuerelement. Beisp…
Typ: block Selbst-schliessend: Nein legend Definiert eine Beschriftung für den Inhalt eines Elternt…
Selbst-schliessend: Nein li Definiert ein Listenelement innerhalb einer geordneten Liste <ol >…
Selbst-schliessend: Nein link Definiert einen Link zwischen der aktuellen Webseite und einem extern…
Typ: block Selbst-schliessend: Nein main Definiert den Hauptinhalt einer Webseite. Kann mit einer …
Typ: block Selbst-schliessend: Nein map Definiert eine interaktive Karte über ein Bild. Beispiel: &…
Typ: inline Selbst-schliessend: Nein mark Definiert hervorgehobenen Text. Beispiel: We use HTML5 t…
Selbst-schliessend: Nein meta Definiert Metadaten, die an eine Webseite angehängt sind. Beispiel: &…
Typ: block Selbst-schliessend: Nein meter Definiert einen horizontalen Zähler. Beispiel: Progress …
Typ: block Selbst-schliessend: Nein nav Definiert einen Abschnitt mit Navigationslinks. Beispiel: …
Typ: block Selbst-schliessend: Nein noframes Definiert den Inhalt, der angezeigt wird, wenn der Bro…
Typ: block Selbst-schliessend: Nein noscript Definiert den Inhalt, der angezeigt wird, wenn der Bro…
Typ: block Selbst-schliessend: Nein object Definiert einen Container für eine externe Ressource. Be…
Typ: block Selbst-schliessend: Nein ol Definiert eine geordnete Liste. Beispiel: Step one Step two …
Typ: block Selbst-schliessend: Nein optgroup Definiert eine Gruppe von <option > Elementen. Be…
Selbst-schliessend: Nein option Definiert eine Option innerhalb eines <select > Dropdowns. Bei…
Typ: inline Selbst-schliessend: Nein output Definiert das Ergebnis einer Berechnung oder einer Benu…
Typ: block Selbst-schliessend: Nein p Definiert einen einfachen Absatz von Text. Beispiel: Hello Wo…
Selbst-schliessend: Ja param Definiert einen Parameter für ein <object> Element. Beispiel: Yo…
Selbst-schliessend: Nein picture Experimental Definiert einen Container für Quellen eines <img&…
Typ: block Selbst-schliessend: Nein pre Definiert vorformatierten Text. Beispiel: <!DOCTYPE html…
Typ: block Selbst-schliessend: Nein progress Definiert einen Fortschrittsbalken. Beispiel: Progres…
Typ: inline Selbst-schliessend: Nein q Definiert ein kurzes Zitat. Beispiel: He looks around and sa…
Typ: inline Selbst-schliessend: Nein rp Definiert den Inhalt, der angezeigt wird, wenn der Browser …
Typ: inline Selbst-schliessend: Nein rt Definiert die Aussprache von Ruby -Kommentaren. Beispiel: 漢 …
Typ: inline Selbst-schliessend: Nein rtc Definiert einen Text-Container innerhalb von Ruby-Anmerkun…
Typ: block Selbst-schliessend: Nein ruby Definiert eine Ruby-Anmerkung zur Anzeige der Aussprache o…
Typ: inline Selbst-schliessend: Nein s Definiert durchgestrichenen Text. Beispiel: Alex is 37 38 ye…
Typ: inline Selbst-schliessend: Nein samp Definiert eine Beispielausgabe von einem Computerprogramm…
Selbst-schliessend: Nein script Definiert einen Container für ein externes Skript. Beispiel: <sc…
Typ: block Selbst-schliessend: Nein section Definiert einen Abschnitt innerhalb einer Webseite. Be…
Typ: block Selbst-schliessend: Nein select Definiert ein Auswahl Dropdown mit verschiedenen <opt…
Typ: inline Selbst-schliessend: Nein slot Experimental Definiert einen Container für user markup.
Typ: inline Selbst-schliessend: Nein small Definiert Kleingedrucktes, für weniger wichtige Inhalte.…
Selbst-schliessend: Ja source Definiert eine Quelle für ein <audio>, <video >, oder <…
Typ: inline Selbst-schliessend: Nein span Definiert einen generischen Inline-Container für Inhalte,…
Typ: inline Selbst-schliessend: Nein strong Legt eine fette Hervorhebung für Texte fest. Beispiel: …
Selbst-schliessend: Nein style Definiert einen Container zum Hinzufügen von CSS innerhalb einer Web…
Typ: inline Selbst-schliessend: Nein sub Definiert den Text, der tiefgestellt werden soll. Beispiel…
Typ: block Selbst-schliessend: Nein summary Definiert die Zusammenfassung eines <details> El…
Typ: inline Selbst-schliessend: Nein sup Definiert Text, der höhergestellt angezeigt werden soll. B…
Typ: block Selbst-schliessend: Nein table Definiert einen Container für Tabellendaten. Beispiel: Na…
Typ: block Selbst-schliessend: Nein tbody Definiert eine Gruppe von Tabellenzeilen <tr >. Beis…
Selbst-schliessend: Nein td Definiert eine Tabellenzelle. Muss ein direktes Kind einer <tr> s…
Typ: block Selbst-schliessend: Nein template Experimental Definiert einen Platzhalter für Inhalte, …
Typ: inline Selbst-schliessend: Nein textarea Definiert ein Mehrzeiliges Text-Steuerelement innerha…
Typ: block Selbst-schliessend: Nein tfoot Definiert eine Gruppe von Tabellenzeilen <tr> am En…
Selbst-schliessend: Nein th Definiert eine Tabellenüberschrift. Muss ein direktes Kind einer <tr…
Typ: block Selbst-schliessend: Nein thead Definiert eine Gruppe von Tabellenzeilen <tr> am An…
Typ: inline Selbst-schliessend: Nein time Definiert eine Zeit auf einer 24h-Uhr. Beispiel: The gam…
Selbst-schliessend: Nein title Definiert den Titel der Webseite, der auf der Registerkarte des Brow…
Selbst-schliessend: Nein tr Definiert eine Tabellenzeile. Beispiel: World Cup winners Location Scor…
Selbst-schliessend: Ja track Definiert text tracks (wie Untertitel) für <audio> und <video…
Typ: inline Selbst-schliessend: Nein u Macht den Text eines Elements unterstrichen. Beispiel: Hello…
Typ: block Selbst-schliessend: Nein ul Definiert eine ungeordnete Liste. Beispiel: My shopping list…
Typ: inline Selbst-schliessend: Nein var Definiert eine Variable in einem mathematischen oder progr…
Typ: block Selbst-schliessend: Nein video Ermöglicht das Einbetten eines Videoclips in eine Websei…
Typ: inline Selbst-schliessend: Nein wbr Experimental Definiert eine Stelle innerhalb eines Textbl…