HTML-Einführung
HTML ist eine Auszeichnungssprache für Websites. Sie besteht aus Elementen, die Text, Bilder und andere Inhalte im Browser strukturieren.
HTML steht für HyperText Markup Language. Es handelt sich um die standardisierte Auszeichnungssprache, mit der Webseiten und Anwendungen erstellt werden, die in einem Browser angezeigt werden können. In den frühen 1990er Jahren entwickelt, vereint sie Hypertext (der Links zwischen Webseiten definiert) und Markup (das die Struktur des Inhalts durch Tags beschreibt).
HTML ist keine Programmiersprache — sie enthält keine Logik oder Berechnungen. Stattdessen beschreibt sie die Struktur: welche Teile einer Seite Überschriften, Absätze, Listen, Links oder Bilder sind. Auf einer typischen Webseite arbeiten drei Technologien zusammen:
- HTML liefert die Struktur und den Inhalt (dieses Kapitel).
- CSS steuert die Darstellung — Farben, Layout, Schriftarten.
- JavaScript fügt Verhalten und Interaktivität hinzu.
HTML-Tags werden verwendet, um HTML-Elemente zu definieren. Ein HTML-Element besteht in der Regel aus einem öffnenden Tag und einem schließenden Tag, zwischen denen der Inhalt eingefügt wird. Browser lesen die Tags, um HTML-Dokumente zu erstellen und deren Inhalt auf dem Bildschirm darzustellen. Zu den grundlegenden HTML-Tags gehören <html>, <head>, <title>, <body>, <h1> bis <h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img> und viele weitere.
Ihr erstes HTML-Dokument
Hier ist eine vollständige, minimale HTML-Seite. Tippen Sie sie in einen beliebigen Klartext-HTML-Editor, speichern Sie sie als Datei mit der Endung .html, und öffnen Sie sie in einem beliebigen Browser — Sie sehen eine Überschrift und einen Absatz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>Wenn Sie diese Datei öffnen, parst der Browser das Markup (liest die Tags und erstellt einen Elementbaum) und rendert es anschließend (zeichnet das Ergebnis auf dem Bildschirm). Das <h1> wird zu einer großen Überschrift und das <p> zu einem normalen Absatz — Sie sehen nie die spitzen Klammern selbst, nur deren Wirkung. Fügen Sie später CSS und JavaScript hinzu, um denselben Inhalt zu gestalten und zu animieren.
HTML-Versionen
HTML wurde 1990 vom britischen Physiker Tim Berners-Lee erstmals entwickelt. Seitdem gab es viele Versionen von HTML.
| Version | Jahr |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2014 |
Einige Hinweise, die die Tabelle leichter lesbar machen. HTML 4.01 (1999) blieb für etwa ein Jahrzehnt die dominierende Version, sodass ein Großteil des Webs jahrelang auf ihr aufgebaut wurde. XHTML 1.0 (2000) reformulierte HTML mit strengeren XML-Regeln — beispielsweise musste jedes Tag geschlossen und in Kleinbuchstaben geschrieben werden — aber diese Strenge setzte sich für die alltägliche Entwicklung nie vollständig durch. HTML5 wurde 2014 als stabile W3C-Empfehlung veröffentlicht (ein früherer Meilenstein von 2012 war nur ein Entwurf) und ist die Version, die heute verwendet wird.
Seit 2014 wird HTML nicht mehr in diskreten nummerierten Versionen herausgegeben. Stattdessen wird es als WHATWG HTML Living Standard gepflegt — eine einzige Spezifikation, die kontinuierlich aktualisiert wird, wenn neue Funktionen übernommen werden. In der Praxis bedeutet das, was heute „HTML" meint: Es gibt kein „HTML6", das in Vorbereitung ist, nur ein sich weiterentwickelnder Standard. Wenn Menschen heute „HTML5" sagen, meinen sie in der Regel diese moderne, lebendige Version der Sprache.
Grundkonzepte: Elemente, Tags und Attribute
Die drei Bausteine von HTML sind Elemente, Tags und Attribute. Ein Element ist die wichtigste strukturelle Einheit einer Webseite. Tags kennzeichnen, wo ein Element beginnt und endet, und Attribute liefern zusätzliche Informationen über ein Element. In den nächsten beiden Abschnitten werden Tags und Attribute im Detail betrachtet.
HTML-Tags
HTML-Tags werden verwendet, um Websiteinhalte zu strukturieren (Text, Hyperlinks, Bilder, Medien usw.). Tags werden in Browsern nicht angezeigt — sie „instruieren" Browser lediglich, wie der Inhalt der Webseite dargestellt werden soll.
Es gibt über 100 Tags in HTML, die Sie in unserem HTML-Tutorial finden können.
HTML-Tags werden in spitze Klammern geschrieben (z. B. <html>).
Die meisten HTML-Tags treten in Paaren auf, wie die <p> </p>-Tags. Das erste Tag eines Paares wird als öffnendes Tag (Start-Tag) bezeichnet, das zweite als schließendes Tag (End-Tag). Der Inhalt wird zwischen dem öffnenden und dem schließenden Tag geschrieben.
Es gibt jedoch auch ungepaarte oder leere Tags, die nur ein öffnendes Tag haben (zum Beispiel <img>).
Betrachten wir ein Beispiel.
Wenn Sie einen Absatz (der ein Element darstellt) definieren möchten, sollten Sie das <p>-Tag verwenden. Der Inhalt des Absatzes wird zwischen dem öffnenden (<p>) und dem schließenden (</p>) Tag geschrieben.
Beispiel
Das folgende Markup platziert einen einzelnen Absatz in einer minimalen Seite:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Paragraph example</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>Der Browser blendet die Tags <p> und </p> selbst aus und rendert nur den Text zwischen ihnen — „This is a paragraph." — als Block mit Fließtext.
HTML-Attribute
HTML-Attribute werden einem Element hinzugefügt, um zusätzliche Informationen darüber bereitzustellen. Attribute werden im öffnenden Tag geschrieben und folgen der Syntax name="value": Der Name gibt an, was Sie festlegen, und der Wert (in Anführungszeichen) gibt an, worauf Sie es setzen.
Zum Beispiel verwendet das <img>-Tag das Attribut src, um auf eine Bilddatei zu verweisen, width und height zur Größenangabe und alt, um alternativen Text für Screenreader und für Fälle bereitzustellen, in denen das Bild nicht geladen werden kann:
<img src="logo.png" width="200" height="100" alt="Company logo">Hier sind vier Attribute auf einem Element gesetzt. Ein einzelnes Element kann so viele Attribute tragen, wie es benötigt, durch Leerzeichen getrennt. Mehr dazu erfahren Sie im Kapitel HTML-Attribute.
Struktur eines HTML-Dokuments
Die <!DOCTYPE html>-Deklaration gibt die im Dokument verwendete HTML-Version an. Jedes HTML-Dokument sollte mit dieser Deklaration beginnen, damit die Browser die Seite konform mit den HTML-Standards rendern können.
Es gibt verschiedene Typen von <!DOCTYPE>, die für jede HTML-Version definiert sind.
Alle Inhalte der Webseite werden zwischen <html> </html>-Tags geschrieben. Das <html>-Element wird verwendet, um dem Browser mitzuteilen, dass es sich um ein HTML-Dokument handelt.
Das <head>-Element enthält Metadaten (Daten über das HTML-Dokument), den Zeichensatz, den Dokumenttitel, Stile usw. Diese Daten werden den Besuchern nicht angezeigt.
Innerhalb von <head> ist das am häufigsten kopierte Tag das viewport-Meta-Tag. Das Hinzufügen von <meta name="viewport" content="width=device-width, initial-scale=1"> weist mobile Browser an, die Seitenbreite an die Gerätebreite anzupassen, anstatt ein Desktop-Layout zu verkleinern — ohne dieses Tag sieht Ihre Seite auf Smartphones winzig aus.
Das <title>-Element zeigt den Titel der Website im Browser-Tab an, wenn die Seite geladen wird. Der Titel wird zwischen <title> </title>-Tags geschrieben.
Das <body>-Element enthält den Inhalt der Webseite (Text, Bilder, Videos usw.). Der Inhalt wird zwischen <body> und </body>-Tags geschrieben.
Überschriftenelemente enthalten verschiedene Arten von Überschriften. Es gibt sechs Überschriftenebenen — <h1>-<h6>, wobei <h1> das wichtigste und <h6> das unwichtigste Tag ist.
Das <p>-Element enthält Textabsätze. Der Inhalt wird zwischen <p> und </p>-Tags geschrieben.
Beispiel
HTML-Einführung
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title of the document</title>
</head>
<body>
<h1>The most important heading.</h1>
<p>The first paragraph.</p>
<h2>Subheading</h2>
</body>
</html>Ergebnis
Um HTML-Code für Ihre Website zu schreiben, benötigen Sie einen Editor. Im nächsten Kapitel sprechen wir über HTML-Editoren.