Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

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. 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 - soll 2 unterschiedliche Inhalte trennen
(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> Bei allen Aufzählungen (nächste 2 Punkte) müssen die Einzelpunkte durch diesen Tag gekennzeichnet sein.
(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 im HTML definiert. Diesen Bereich kann man über CSS dann das 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 auch 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)!

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2014 Axel Pratzner • www.html-seminar.de • Stand 2.1.2014
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de