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.
HTML Dokumente sind die Grundlage des World Wide Web (www) und werden mit einem Web-Browser (z.B. Mozilla Firefox oder Google Chrome) angezeigt. Zusätzlich zum angezeigten Inhalt 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:
Die Dokumenttyp-Deklaration (Doctype) steht am Anfang der HTML-Datei.
Der HTML-Kopf (Englisch: Head) enthält hauptsächlich technische Informationen, die nicht im Browser angezeigt werden.
Der HTML-Körper (Englisch: Body) enthält hauptsächlich die Informationen, 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.
<title> ⋯ </title> – Titel der Seite, die meisten Web-Browser zeigen diesen Titel in der Titelzeile an.
Siehe Meta Title,<meta ⋯> – Kann unterschiedliche Meta-Informationen enthalten.
Siehe Meta Tags,<base ⋯> – Basis-URI oder Basis-Frame
<link ⋯> – Bindet eine externe Resource ein, z.B. eine CSS-Datei.
Siehe CSS Grundlagen<script ⋯> ⋯ </script> – Bindet Code in einer bestimmten Skript-Sprache ein, z.B. JavaScript.
<style> ⋯ </style> – Bindet Stil-Informationen ein, hauptsächlich interne CSS-Deklarationen.
Siehe CSS Grundlagen<object ...></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 die eigentlich sichtbaren Inhalte der Webseite (HTML-Seite). HTML-Elemente werden grundsätzlich in zwei Kategorien unterteilt, Block-Elemente und Inline-Elemente. Der wesentliche Unterschied dieser beiden Kategorien 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, die mit den Zeichen < (kleiner als) und > (größer als) erzeugt werden. HTML-Tags bezeichnet man auch als HTML Markup bzw. HTML Auszeichnung. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Das abschließende Tag erkennt man an dem Slash (Schrägstrich) nach der öffnenden spitzen Klammer.
Zu HTML-Tags ohne Inhalt (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 Gründen der Kompatibilität ist es empfehlenswert, sie stets kleingeschrieben zu notieren.
Übersicht: die wichtigsten HTML-Tags
| Text strukturieren | Beschreibung |
| <h1> … </h1> | Erzeugt eine Überschrift (Englisch: Heading) 1. Ordnung. Mit H1 wird die wichtigste Überschrift für die ganze Seite (Hauptüberschrift) definiert. Das abschließende Tag </h1>-Tag kennzeichnet das Ende der Überschrift und ist notwendig. Wichtig: Jede Seite braucht genau eine H1-Überschrift. |
| <h2> … </h2> ... <h6> … </h6> | Definiert Überschriften (Englisch: Headings) H1 … H6 in abgestufter Gewichtung. H1 hat die höchste Gewichtung, H6 die niedrigste. Die Überschriften 2. - 6. Ordnung sind Unter-Überschriften, die in logischer Reihenfolge verwendet werden sollten. Das abschließende Tag der Überschriften ist notwendig. |
| <p> … </p> | Ein Absatz (p für Englisch: Paragraph) wird mit dem P-Tag erzeugt. Das abschließende </p> Tag am Ende des Absatzes ist in HTML5 technisch optional, falls dem P-Element direkt ein anderes Block-Element folgt. Aus Gründen der Konsistenz sollte ein Absatz immer mit </p> abgeschlossen werden. |
| <br> | Erzwingt einen Zeilenumbruch (br für Englisch: Line Break) innerhalb eines Textes. Für <br> existiert kein kein abschließendes Tag. |
| <hr> | Das HTML Tag <hr> (hr für Englisch: horizontal Ruler) erzeugt eine horizontale Trennlinie. Damit kann z.B signalisiert werden, 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> <b> … </b> | Wichtigen Text mit starker (Englisch: strong) Betonung semantisch hervorheben. Standardmäßig wird wichtiger Text fett gedruckt dargestellt. Mit STRONG ausgezeichnete Wörter werden stärker betont und erhalten eine stärkere Gewichtung als normaler Text. Einzelne Wörter >fett drucken (b für Englisch: bold). Im Gegensatz zu STRONG werden mit <b> Wörter nur visuell formatiert. Der Fettdruck der Wörter ist keine semantische Auszeichnung, um die formatierten Wörter stärker zu betonen. Mit <b> ausgezeichnete Wörter sind normaler Text. |
| <em> … </em> <i> … </i> | Die mit <em> ausgezeichneten Wörter werden stärker betont (em für Englisch: Emphasis) als normaler Text. Standardmäßig wird stärker betonter Text kursiv gedruckt dargestellt. Text kursiv drucken. (i für Englisch: italic). Im Gegensatz zu EM werden mit <i> ausgezeichnete Wörter nur visuell formatiert und kursiv gedruckt dargestellt. Die Formatierung mit <i> ist keine semantische Auszeichnung, d.h. die auf diese Weise ausgezeichneten Wörter werden nicht besonders betont und erhalten keine stärkere Gewichtung als normaler Text. Die Formatierung mit <i> wird häufig für Zitate und Fachbegriffe verwendet. |
| <ins> … </ins> <u> … </u> | Markierter Text wurde neu eingefügt (ins für Englisch: inserted). Der neu eingefügte bzw. aktualisierte Text wird standardmäßig unterstrichen dargestellt. Text unterstreichen (u für Englisch: underline). Das <u>-Tag wird häufig zum Unterstreichen von Textstellen benutzt. Der unterstrichene Text wird nicht semantisch hervorgehoben. Diese Darstellung ist nicht optimal, da der neue bzw. der unterstrichene Text mit einem anklickbaren Link verwechselt werden kann. |
| <del> … </del> <s> … </s> | Markiert nicht mehr aktuellen bzw. gelöschten (del für Englisch: deleted) Text und stellt ihn mit einer feinen horizontalen Linie durchgestrichen dar. Wenn Text nicht mehr gültig ist, sollte das <del>-Tag verwendet werden. Text durchstreichen. (s für Englisch: strike-through). Der mit <s> ausgezeichnete wird mit einer feinen horizontalen Linie durchgestrichen. Das <s>-Tag unterscheidet sich semantisch vom <del>-Tag. |
| <sub> … </sub> <sup> … </sup> | Einen Text tiefstellen (sub für Englisch: subscript) oder hochstellen (sup für Englisch: superscript). Formatiert Text als tiefgestellt oder hochgestellt. |
| <small> … </small> <big> … </big> | <small> reduziert die Schriftgröße um eine konventionelle Einheit, so dass sie eine Stufe kleiner ist als die Standard-Schriftgröße – z.B. von mittel auf klein (Englisch: small). In HTML wird die Schriftgröße in konventionellen Einheiten von 1 bis 7 gemessen. Die Standard Schriftgröße ist 3. Mit <small> wird die Schriftgröße für kurze Hinweise und Ergänzungen zum Haupt-Inhalt der Seite um eine Einheit kleiner eingestellt. Das SMALL Element ist nicht dazu gedacht, die Schriftgröße für ganze Absätze zu ändern, z.B. für das Kleingedruckte in einem Vertrag. Dieser Text wäre der Haupttext der Seite. <big> vergrößert die Schriftgröße um eine Einheit, so dass sie eine Einheit größer ist als die Standard-Schriftgröße, z.B. von mittel auf groß (Englisch: large). Mit <big> kann man die Schriftgröße für kurze Hinweise um eine Einheit vergrößern. Mit BIG soll nicht die Schriftgröße für ganze Absätze vergrößert werden. Das BIG Tag hat keine logische Bedeutung, sondern dient nur der Präsentation. Die Änderung der Schriftgröße kann mit CSS genauer gesteuert werden als mit SMALL und BIG. |
| <blockquote> … </blockquote> <q> … </q> <cite> … </cite> | Formatiert einen kompletten Absatz als Blockzitat (Englisch: Blockquote). Normalerweise wird das Zitat durch Einrückung links und rechts formatiert dargestellt. Formatiert einen (kurzen) Textabschnitt als Zitat (q für Englisch: Quote) im Fließtext. Das <q>-Tag ist besonders für kurze Zitate gedacht. Für längere Zitate, die einen eigenen Absatz benötigen, sollte eher das <blockquote>-Tag benutzt werden. CITE war ursprünglich dazu gedacht, fremde Texte zu zitieren (Englisch: cite). Mit HTML5 ist die Bedeutung des <cite>-Tags jedoch geändert worden. Heute ist CITE dazu bestimmt, den Titel, den Autor oder die URL eines Werks anzugeben. Die Quellenangabe im <cite>-Tag wird wird standardmäßig kursiv dargestellt. |
| Links, Verweise | Beschreibung |
| <a href="URL">Linktext</a> oder <a href="URL">Bild</a> | Definiert einen internen oder externen Link (a für Englisch: Anchor) und href für Englisch: Hyper(text) Reference). Das Anchor Tag (Deutsch: Anker-Tag und der Linktext definieren den Anfangs- und Endpunkt des Hyperlinks. Mit dem Attribut href (Deutsch: Hypertext-Verweis) wird eine Webseite mit einer Seite einer anderen Website (externer Link) oder mit einer Unterseite derselben Domain (interner Link) verlinkt. Es muss nicht Linktext angegeben werden, um einen Textlink zu erzeugen. Man kann auch einen anklickbaren Bildlink erstellen. Dafür muss man nur Linktext durch ein IMG-Tag ersetzen. |
| <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 #: |
| Listen, Aufzählungen | Beschreibung |
| <ul> … </ul> <ol> … </ol> <li> … </li> | Eine ungeordnete Liste (ul für Englisch: unordered List) bzw. Aufzählungsliste wird mit dem <ul>-Tag erzeugt. Bei der Ungeordnete Listen werden die einzelnen Listen-Elemente nicht nummeriert. Eine geordnete Liste (ol für Englisch: ordered List) bzw. sortierte Liste wird mit dem <ol>-Tag erzeugt. Die Listen-Elemente bei der geordneten Liste werden mit Index aus fortlaufenden aus Ziffern oder Buchstaben durchnummeriert. Die Listenelemente (li für Englisch: List Item) der UL- und OL-Liste werden mit <li> … </li> definiert. Nach dem HTML-Standard ist es erlaubt, das abschließende </li> wegzulassen. Aus Gründen der Konsistenz ist dies aber nicht zu empfehlen. Listen können verschachtelt werden. Navigation, NavBar |
| Tabellen | Beschreibung |
| <table> … </table> <tr> … </tr> <th> … </th> <td> … </td> | Mit <table> wird eine Tabelle (Englisch: table) definiert. Damit können 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. Das <tr>-Tag fügt der Tabelle eine neue Tabellenzeile (tr für Englisch: Table Row) hinzu. Eine Tabelle kann Kopfzellen <th> und normale Datenzellen <td> enthalten. Das <th>-Tag fügt der Tabelle eine Kopfzelle (th für Englisch: Table Header) hinzu. Mit <td> wird der Tabelle eine neue Datenzelle (td für Englisch: Table Data) hinzugefügt. |
| Grafiken und Bilder einbinden | Beschreibung |
| <img src="URL" alt="Info" … > | Das HTML <img …> bindet ein Bild (img für Englisch: Image) ein. Das IMG-Tag hat keinen Inhalt und kein abschließ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 das Bild 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 Linktextes verwendet werden, um ein Bild anklickbar zu machen. |
| Audio und Video | Beschreibung |
| <audio> … </audio> | Das neue <audio>-Tag bindet einen Audio-Player ein. Mit audio lassen sich Audio-Dateien (z.B. Musik) ohne Plug-ins in eine Webseite einbinden. Frühere Versionen von HTML benötigten dazu Plug-ins, z.B. Flash. |
| <video> … </video> | Das neue <video>-Tag bindet einen Video-Player in die Webseite ein. Mit video lassen sich Video-Dateien ohne Plug-ins abspielen. Frühere Versionen von HTML benötigten dazu Flash oder andere Plug-ins. |
| Bereiche definieren | Beschreibung |
| <div id="NAME"> … </div> <div class="NAME"> … </div> <span id="NAME"> … </span> <span class="NAME"> … </span> | <div> definiert einen Bereich (div für Englisch: Division). 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. <span> definiert eine Spanne (Englisch: Span). 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. |
| 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 |