die wichtigsten HTML Tags • was Einsteiger wissen müssen • HTML Grundlagen • HTML Code verstehen • Web-Design Grundlagen

Website Advisor

HTML Grundlagen



Was ist HTML und wie sieht eine einfache HTML-Datei aus?

HTML steht für Hypertext Markup Language und heißt auf Deutsch Hypertext Auszeichnungssprache. HTML ist eine text-basierte Sprache zur Strukturierung elektronischer Dokumente. Diese HTML Dokumente sind die Grundlage des World Wide Web (www) und werden mit einem Web-Browser (z.B. Mozilla Firefox oder Google Chrome) dargestellt. Zusätzlich zu den vom Browser angezeigten Inhalten können HTML Dokumente weitere Informationen, sogenannte Meta-Informationen, enthalten.

Allgemeine Struktur einer HTML-Datei
Der Inhalt einer HTML-Datei besteht aus folgenden drei Bereichen:

  1. die Dokumenttyp-Deklaration (Doctype) ganz am Anfang
  2. der HTML-Kopf (head), der hauptsächlich technische Informationen enthält, die im Browser nicht angezeigt werden.
  3. der HTML-Körper (body), der hauptsächlich die Informationen enthält, die im Browser angezeigt werden.
<!DOCTYPE html>
<html lang="de">

<head>
<title>Titel der Webseite</title>
<meta name="description" content="Beschreibung der Webseite">
<meta name="keywords" content="Suchbegriffe der Webseite">
<meta charset="utf-8">
<meta name="language" content="de">
<meta name="robots" content="index, follow">
<meta name="robots" content="all">
<!-- weitere Kopfinformationen -->
<!-- Kommentare werden im Browser nicht angezeigt -->
<link href="favicon.png" rel="icon" type="image/png" size="32x32">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<p>Das ist der Inhalt der Webseite!</p>
</body>
</html>

Der HTML-Kopf (head)
Es gibt sieben verschiedene Elemente, die im HTML-Kopf verwendet werden können.

  1. <title> ... </title> – Titel der Seite, die meisten Web-Browser zeigen diesen Titel in der Titelzeile an.
    Siehe Meta Tags,
  2. <meta ... > – Kann unterschiedliche Meta-Informationen enthalten.
    Siehe Meta Tags,
  3. <base ... > – Basis-URI oder Basis-Frame
  4. <link ... > – Bindet eine externe Resource ein, z.B. eine CSS-Datei.
    Siehe CSS Grundlagen
  5. <script ... > – Bindet Code in einer bestimmten Skript-Sprache ein, z.B. JavaScript.
  6. <style ... > – Bindet Stil-Informationen ein, hauptsächlich interne CSS-Deklarationen.
    Siehe CSS Grundlagen
  7. <object ... > – Bindet eine externe Datei ein, ab HTML5 ist dieses Tag im HTML-Kopf nicht mehr erlaubt.

Der HTML-Körper (body)
Der HTML-Körper enthält den eigentlichen sichtbaren Inhalt der Webseite (bzw. HTML Seite). HTML kennt zwei Arten von Elementen, Block-Elemente und Inline-Elemente. Der grundsätzliche Unterschied dieser beiden Arten von Elementen ist, dass Block-Elemente einen eigenen Block erzeugen, während Inline-Elemente den normalen Textfluss nicht unterbrechen. Block-Elemente erzwingen einen Zeilenumbruch vor und nach dem Element und nutzen die komplette, verfügbare Fensterbreite. Typische Block-Elemente sind die Überschriften <h1> bis <h6> und das Absatz-Element <p>. Mit CSS können die Standard Eigenschaften der HTML-Elemente verändert werden.

Was sind HTML Tags?

HTML Tags sind Anweisungen in spitzen Klammern. Sie werden auch HTML Markup oder HTML Auszeichnung genannt. Fast alle HTML Tags bestehen aus einem einleitenden Tag und einem abschließenden Tag. Das abschließende Tag erkennt man an dem Schrägstrich (Slash) nach der öffnenden spitzen Klammer. Zu inhaltsleeren Tags (z.B. <br>, <img ...> oder<hr>) existiert kein abschließendes Tag. HTML Tags sind case insensitive, d.h. sie können aus Großbuchstaben, Kleinbuchstaben oder einer beliebigen Mischung aus Groß- und Kleinbuchstaben geschrieben werden. Aus Kompatibilitäts-Gründen ist es empfehlenswert, sie stets kleingeschrieben zu notieren.

Übersicht: die wichtigsten HTML-Tags

Text strukturieren

Beschreibung

<h1> ... </h1>
Hauptüberschrift (Englisch »heading« = Überschrift) 1. Ordnung für die ganze Seite. Wichtig, es sollte auf jeder Seite nur eine h1 Überschrift geben. Das abschließende </h1>-Tag signalisiert das Ende der Überschrift und ist notwendig.   ▶ <h1>
<h2> ... </h2>
    ...
<h6> ... </h6>
Unterüberschriften (Englisch »headings« = Überschriften) 2. bis 6. Ordnung. Die Überschriften sollten in logischer Reihenfolge verwendet werden. Die Überschrift h6 hat die niedrigste Gewichtung. Das abschließende Tag der Überschrift ist notwendig.   ▶ <h1> bis <h6>
<p> ... </p>
Definiert einen Absatz (p für Englisch »paragraph« = Absatz). Das abschließende </p>-Tag am Ende des Absatzes ist in HTML5 fakultativ und kann weggelassen werden. Wenn es kein abschließendes </p>-Tag gibt, fällt in HTML5 das Ende des Absatzes mit dem Anfang des nächsten Block-Elements zusammen. Aus Gründen der Konsistenz sollten Du das <p>-Tag aber stets mit </p> abschließen.   ▶ <p>
<br>
Erzwingt einen Zeilenumbruch (br für Englisch »break« = Umbruch) innerhalb eines Textes. Für <br> existiert kein abschließendes Tag.
<hr>
Das HTML Tag <hr> (hr für Englisch »horizontal ruler« = horizontales Lineal) erzeugt eine horizontale Trennlinie. Damit wird signalisiert, dass sich das Thema ändert. Durch <hr> wird der normale Textfluss unterbrochen, denn vor und nach hr wird ein Zeilenumbruch eingefügt. Standardmäßig hat die Trennlinie 100% Breite und 2 Pixel Höhe. Für <hr> existiert kein abschließendes Tag.
Textstellen hervorheben

Beschreibung

<strong> ... </strong>
Markiert einen Textabschnitt als besonders wichtig (Englisch »strong« = stark) und hebt ihn fettgedruckt hervor.   ▶ <strong> vs. <b>
<b> ... </b>
Hebt einen Textabschnitt in Fettschrift (b für Englisch »bold« = fettgedruckt) hervor. Im Gegensatz zu <strong> markiert <b> den Textabschnitt nicht als wichtig.   ▶ <strong> vs. <b>
<em> ... </em>
Markiert einen Textabschnitt als betont (em für Englisch »emphasis« = Betonung). Standardmäßig wird der Text kursiv dargestellt.   ▶ <em> vs. <i>
<i> ... </i>
Markiert einen Textabschnitt als kursiv gedruckt (i für Englisch »italic« = kursiv) und stellt ihn kursiv dar. Das <i>-Tag wird häufig für Fachbegriffe und Zitate benutzt.   ▶ <em> vs. <i>
<ins> ... </ins>
Markiert einen Textabschnitt als neu (ins für Englisch »inserted« = eingefügt) und stellt ihn standardmäßig unterstrichen dar. Diese Darstellung ist nicht optimal, da der neue Text mit einem anklickbaren Link verwechselt werden kann.   ▶ <ins> vs. <u>
<u> ... </u>
Markiert einen Textabschnitt als unterstrichen (u für Englisch »underline« = unterstrichen) und stellt ihn unterstrichen dar. Das <u>-Tag wird häufig für einfache Betonung verwendet.   ▶ <ins> vs. <u>
<del> ... </del>
Markiert einen Textabschnitt als gelöscht (del für Englisch »deleted« = gelöscht) und stellt ihn mit einer feinen horizontalen Linie durchgestrichen dar. Wenn ein Textabschnitt nicht mehr gültig ist, sollte das <del>-Tag verwendet werden.   ▶ <del> vs. <s>
<s> ... </s>
Markiert einen Textabschnitt als durchgestrichen (s für Englisch »strike-through« = durchgestrichen) und streicht ihn mit einer feinen horizontalen Linie durch. Das <s>-Tag wird häufig verwendet, wenn ein Textabschnitt nicht mehr gültig ist. Das <s>-Tag unterscheidet sich semantisch vom <del>-Tag.   ▶ <del> vs. <s>
<sub> ... </sub>
Formatiert einen Textabschnitt als tiefgestellten Text (sub für Englisch »subscript« = tiefgestellt), z.B. H2O.   ▶ <sub> vs. <sup>
<sup> ... </sup>
Formatiert einen Textabschnitt als hochgestellten Text (sup für Englisch »superscript« = hochgestellt), z.B. Fußnote2.   ▶ <sub> vs. <sup>
<small> ... </small>
Zeichnet einen Textabschnitt als weniger bedeutend (Englisch »small« = klein) aus und stellt ihn standardmäßig in kleinerer Schrift dar. Das <small>-Tag ist nicht dazu gedacht, die Schriftgröße für ganze Textabschnitte oder Absätze zu verkleinern (z.B. das Kleingedruckte eines Vertrags), sondern für kurze Hinweise innerhalb oder unterhalb eines Textes.   ▶ <small> & <big>
<big> ... </big>
Zeichnet einen Textabschnitt als bedeutender (Englisch »big« = groß) aus und stellt ihn standardmäßig in größerer Schrift dar. Das <big>-Tag ist nicht dazu gedacht, die Schriftgröße für ganze Textabschnitte oder Absätze zu vergrößern, sondern für kurze Hinweise innerhalb oder oberhalb eines Textes.   ▶ <small> & <big>
<blockquote> ... </blockquote>
Formatiert einen kompletten Absatz als Zitat (Englisch »blockquote« = Blockzitat). Normalerweise wird das Zitat durch Einrückung dargestellt.   ▶ <blockquote> vs. <q>
<q> ... </q>
Formatiert eine kurze Textstelle als Zitat (q für Englisch »quote« = Zitat). Das <q>-Tag ist für kurze Zitate im Fließtext gedacht. Für längere Zitate, die einen eigenen Absatz benötigen, sollte das <blockquote>-Tag benutzt werden.   ▶ <blockquote> vs. <q>
<cite> ... </cite>
War ursprünglich dazu gedacht Zitate zu formatieren (Englisch »cite« = zitieren). Mit HTML5 ist die Bedeutung des <cite>-Tags geändert worden. Heute ist es dazu bestimmt, den Titel eines Werks oder den Autor eines Werks oder die URL eines Werks anzugeben. Der Text in cite wird kursiv dargestellt.   ▶ <blockquote> vs. <q>
Links, Verweise

Beschreibung

<a href="URL">Link-Text</a>

    oder

<a href="URL">Bild</a>
Definiert einen internen oder externen Link (a für Englisch »Anchor« = Anker, href für Englisch »hypertext reference« = Hypertext-Verweis). Das Anchor Tag (Deutsch Anker-Tag oder Linktext definiert den Anfangs- und Endpunkt eines Hyperlinks. Dadurch wird eine Webseite mit einer anderen Website (externer Link) oder mit einer Unterseite auf der gleichen Domain (interner Link) verlinkt. Anstelle des Linktexts kann auch ein Bild angegeben werden. Die Bild-Datei kann von einem fremden Server oder vom gleichen Server wie das HTML-Dokument geladen werden.   ▶ <a href="...">
<a name="ANKER">TEXT</a>
Das Sprungziel kann auch eine Sprungmarke innerhalb der HTML-Seite sein. Dadurch kann mit einem Hyperlink zu einem Unterabschnitt auf der gleichen Seite gesprungen werden.

Die Defintion der Sprungmarke durch <a name="Ankername">Linktext</a> ist in HTML5 nicht mehr zulässig. Eine Sprungmarke für einen Unterabschnitt kann in HTML5 zum Beispiel durch <h2 id="Ankername">Überschrift</h2> definiert werden.

Ein Verweis auf die Sprungmarke erfolgt mit dem Fragment-Bezeichner #:
<a href="#Ankername">Linktext</a>   ▶ <a name="...">
Listen, Aufzählungen

Beschreibung

<ul> ... </ul>
Definiert eine unsortierte Liste (ul für Englisch »unordered list« = ungeordnete Liste).   ▶ <ul> vs. <ol>
<ol> ... </ol>
Definiert eine sortierte Liste (ol für Englisch »ordered list« = geordnete Liste).   ▶ <ul> vs. <ol>
<li> ... </li>
Definiert ein Listen-Element (li für Englisch »list item« = Listen-Element). Nach dem HTML-Standard ist es erlaubt, das abschließende </li>-Tag wegzulassen. Aus Gründen der Konsistenz ist dies aber nicht zu empfehlen.   ▶ <ul> vs. <ol>
Navigation, NavBar
Horizontale und vertikale Navigationsmenüs werden häufig durch <ul> <li>-Listen realisiert. Design und Ausrichtung der Navigations-Liste werden durch CSS festgelegt.
Tabellen

Beschreibung

<table> ... </table>
Definiert eine Tabelle (Englisch »table« = Tabelle) und erlaubt es, dass tabellarische Daten in Zeilen und Spalten angeordnet werden. Für eine Tabelle werden mindestens die drei HTML-Tags <table>, <tr> und <td> benötigt. Wegen der besseren Übersichtlichkeit sollte bei Tabellen besonders auf sauberen Code geachtet werden. Es empfiehlt sich auf jeden Fall mit Einrückungen zu arbeiten. Eine Tabelle kann Kopfzellen <th> und normale Datenzellen <td> enthalten.   ▶ <table>
<tr> ... </tr>
Fügt der Tabelle eine neue Zeile (tr für Englisch »table row« = Tabellenzeile) hinzu.   ▶ <table>
<th> ... </th>
Fügt der Tabelle eine Kopfzelle (th für Englisch »table header« = Tabellenkopf) hinzu.   ▶ <table>
<td> ... </td>
Fügt der Tabelle eine neue Datenzelle (td für Englisch »table data« = Tabellendaten) hinzu.   ▶ <table>
Grafiken und Bilder
einbinden		Beschreibung

<img src="URL" alt="Info" ... >
Bindet ein Bild (img für Englisch »image« = Bild) ein. Das img-Tag hat keinen Inhalt und kein schließendes </img>-Tag. Die beiden Attribute src und alt sind notwendig.

URL ist der relative oder absolute Pfad zur Bild-Datei, z.B. src="/bilder/foto.png". URL kann auch der Pfad zu einer Bild-Datei auf einem anderen Server sein.

Mit dem Attribut alt wird der Inhalt des Bildes beschrieben. Diese Beschreibung wird ausgegeben, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann, z.B. wenn das Bild nicht geladen werden kann oder wenn ein Screenreader verwendet wird.

Mit den optionalen Attributen width="BREITE" und height="HÖHE" kann die Breite und Höhe des Bildes angegeben werden. Es sind nur Angaben in Pixel (d.h. ohne Einheit) erlaubt. Diese beiden Werte sollten angegeben werden, damit der Browser beim Laden der Seite, Platz für das Bild reservieren kann.

Das <img>-Tag kann im <a>-Tag anstelle des Link-Textes verwendet werden, um ein Bild anklickbar zu machen.   ▶ <img src="...">
Audio und Video

Beschreibung

<audio> ... </audio>
Bindet einen Audio-Player ein. Mit dem neuen audio-Tag lassen sich Audio-Dateien (z.B. Musik) ohne Plugins in eine Webseite einbinden. Frühere Versionen von HTML benötigten dazu Plugins, z.B. Flash.   ▶ <audio>
<video> ... </video>
Bindet einen Video-Player in die Webseite ein. Mit dem video-Tag lassen sich Video-Dateien ohne Plugins abspielen. Frühere Versionen von HTML benötigten dazu Flash oder andere Plugins.   ▶ <video>
Bereiche definieren

Beschreibung

<div id="NAME"> ... </div>
<div class="NAME"> ... </div>
Definiert einen Bereich (div für Englisch »division« = Bereich). Bei <div> handelt es sich um ein Block-Element, das standardmäßig die gesamte verfügbare Breite im Browser-Tab in Anspruch nimmt. Das <div>-Element wird als Container verwendet, um allen Elementen in diesem Container bestimmte Eigenschaften zuzuordnen. Die Eigenschaften des <div>-Containers können über CSS festgelegt werden.

Die Attribute id und class sind ähnlich. Allerdings mit dem Unterschied, dass id nur einmal je Webseite verwendet werden darf und class mehrmals.   ▶ <div> vs. <span>
<span id="NAME"> ... </span>
<span class="NAME"> ... </span>
Definiert einen Bereich (Englisch »span« = Spanne, Bereich). Bei <span> handelt es sich um ein Inline-Element, das standardmäßig den normalen Textfluss nicht unterbricht. Das <span>-Element wird benutzt, um einzelne Textstellen zu markieren. Die Eigenschaften dieses <span>-Elements können über CSS definiert werden, zum Beispiel die Schriftgröße oder die Schriftfarbe.

Die Attribute id und class sind ähnlich. Allerdings mit dem Unterschied, dass eine id nur einmal je Webseite verwendet werden darf, eine class aber beliebig oft.   ▶ <div> vs. <span>
Farben in HTML
Farben werden über CSS definiert.

Früher wurden Farben mit Attributen bei HTML-Tags festgelegt. Im Sinne der Trennung von Design und Inhalt hat dies heute aber keinen Sinn mehr.

Farben werden vor allem benötigt, um die Hintergrundfarben für verschiedene Bereiche der Webseite zu definieren und um verschiedene Schriftfarben festzulegen.

Einen schnellen Überblick über die HTML Farbnamen bietet die Seite HTML Farben.