HTML-Befehle Übersicht

Die HTML5-Kurzreferenz listet alle wichtigen HTML-Befehle auf. Dabei wurden die Befehle thematisch gruppiert. Die aufgelisteten HTML-Befehle sind die wichtigen!

In der Übersicht sind nur noch gültige HTML5-Befehle zu finden. Auch wenn die Liste kurz erscheint: es sind alle wichtigen HTML-Befehle enthalten (außer für Formulare). HTML ist für die Struktur zuständig - für Design wird CSS genutzt! Für CSS gibt es eine extra Auflistung der CSS-Anweisungen. Alle veralteten HTML TAGs, die für Design zuständig waren, werden hier nicht aufgelistet,

Als Download gibt es die HTML5 und CSS Referenz im PDF-Format unter http://www.html-seminar.de/downloads/html5-css-referenz.pdf. Dort finden Sie alle wichtigen HTML Tags und CSS-Anweisungen im Überblick (und zum schnellen Nachschlagen).

HTML5-Grundgerüst
HTML-Befehle Beschreibung
<!DOCTYPE html> HTML5-Doctype, erste Zeile der HTML-Datei
<html lang="de"> Umschließt den kompletten Inhalt und es wird im Inhalt als Sprache Deutsch verwendet
<head> Head-Bereich, der Metainformationen über die Webseite enthält (werden nicht im Browserfenster angezeigt)
<meta charset="UTF-8"> Verwendete Codierung - mit UTF-8 können Sonderzeichen direkt genutzt werden (im Deutschen z.B. Umlaute öäü)
<title>HTML5-Grundgerüst</title> Wichtig! Titel der Seite - hat mehrere wichtige Funktionen:
  • Titelzeile im Browserfenster
  • Namen von gesetzten Lesezeichen/Bookmarks
  • Liste der bereits besuchten Seiten
  • für den Eintrag bei Suchmaschinen in der ersten Zeile
(engl. title=Titel)
</head>
<body> Umschließt den Inhalt, der im Browserfenster angezeigt wird
INHALT Hier kommen nun der Inhalt (und alle weiteren HTML-Befehle, die den Inhalt strukturieren)
</body>
</html> Ende der HTML-Seite
Bereiche einteilen über HTML5
HTML5-Befehle Beschreibung
<header> Bereich für Kopf (nicht verwechseln mit <head>!)
<nav> Bereich Navigation (Steuerung)
<section> Gruppiert Elemente
<article> Bereich für Inhalt
<aside> Bereich für Zusatzinformationen zum Inhalt
<footer> Bereich für Fuß
Text strukturieren
HTML-Befehle Beschreibung
<h1> … </h1> Hauptüberschrift - wichtig, sollte 1 mal auf jeder einzelnen Seite kommen
(engl. h = headline = Überschrift)
<h2> … </h2>
bis
<h6> … </h6>
Unterüberschriften - sollten in der logischen Reihenfolge verwendet werden. Nach <h2> kommt <h3>
<p> … </p> Absatz - nach dem Absatz wird automatisch Platz gehalten
(engl. p = paragraph = Absatz)
<br> erzwungener Zeilenumbruch (Zeilenende)
(engl. br = break = Umbruch)
<hr> Trennlinie - trennt unterschiedliche Inhalte
(engl. hr = horizontal ruler = horizontale Linie)
Textstellen hervorheben
HTML-Befehle (HTML-TAG) Beschreibung
<b> … </b> Schrift wird fett angezeigt
(engl. b = bold = fett)
<strong> … </strong> wichtiger Bereich, Schrift wird fett angezeigt
(engl. strong = kräftig, überzeugend)
<i> … </i> Schrift wird kursiv angezeigt
(engl. i = italic = kursiv, schräg)
<em> … </em> hervorgehobener Bereich, Schrift wird kursiv dargestellt
(engl. em = emphasis = betont, Hervorhebung)
<sup> … </sup> hochgestellte Schrift, z.B. Fußnote2
(engl. sup = superscript, zu Deutsch hochstellen)
<sub> … </sub> tiefgestellte Schrift, z.B. H2O
(engl. sub = subscript, zu Deutsch tiefstellen)
<del> … </del> durchstrichener Text, sprich Inhalt gilt nicht mehr
(engl. del = deleted = gelöscht)
<ins> … </ins> neuer Inhalt im Text (gut um Änderungen hervorzuheben)
(engl. ins = inserted = neu eingefügt)
<small> … </small> für das "Kleingedruckte" im Text
(engl. small = klein)
Aufzählungen
HTML-Befehle (HTML-TAG) Beschreibung
<li>AUFZÄHLUNGSPUNKT</li> Jeder einzelne Punkt bei einer Aufzählungen muss von diesem HTML-Befehl umschlossen werden.
(engl. li = list item = Listeneintrag )
<ul> … </ul> Art der Auflistung. Umschließt alle einzelnen <li>
Wird für Aufbau der Seitennavigation benötigt und andere Aufzählungen (engl. ul = unordered list = unsortierte Liste)
<ol> … </ol> Art der Auflistung. Umschließt alle einzelnen <li>
Die einzelnen Listenpunkte bekommen dann entsprechende Nummerierung 1., 2., 3. usw. (engl. ol = ordered list = nummerierte Liste)
Bereiche definieren
HTML-Befehle (HTML-TAG) Beschreibung
<div id="NAME">BEREICH</div> Über DIV wird ein Bereich definiert. Diesen Bereich kann man über CSS dann ein Design "überstülpen". Angesprochen wird der Bereich über seinen ID-Namen. Bei DIV handelt es sich um ein Blockelement - das Blockelement nutzt die komplette Bildschirmbreite.
(engl. div = division = Bereich, Gruppierung von Elementen)
<div class="NAME">BEREICH</div> Der DIV-Bereich kann per CSS über seinen Klassen-Namen angesprochen werden.
(engl. class = Klasse)
<span id="NAME">BEREICH</span> Mit SPAN können Textstellen markiert werden und diese dann über CSS mit Design versehen werden. Das SPAN-Element ist ein Inline-Element, was den Unterschied zum DIV-Element ausmacht.
(engl. span = Abgrenzung, Bereich)
<span class="NAME">BEREICH</span> Kann über den Klassennamen und CSS mit Design versehen werden.
Kommentieren, Auskommentieren
HTML-Befehle (HTML-TAG) Beschreibung
<!-- KOMMENTAR -->

<!--
QUELLCODE ohne Wirkung
-->
Über diese Anweisung können Kommentare im HTML-Code gemacht werden bzw. Teile des HTML-Codes auskommentiert werden. Somit sind diese Teile für einen Browser nicht existent. Das ist z.B. gut zum Testen von HTML-Befehlen.
Farben in HTML
HTML-Befehle (HTML-TAG) Beschreibung
- Farben werden über CSS genutzt!
Früher wurden auch mit Attributen bei HTML-TAGs Farben festgelegt, was aber im Sinne der Trennung von Inhalt und Design heutzutage keinen Sinn mehr macht! Daher gehören Farben (Design) in den CSS-Bereich (zur Übersicht von CSS-Anweisungen)!