Einführung in HTML

Eine Website im Browser besteht im simpelsten Fall nur aus Wörtern. Diese Wörter haben meist verschiedene Eigenschaften wie Schriftart oder Farbe. In vielen Fällen präsentiert die Seite auch Bilder oder Videos. Manchmal gibt es Stellen, an denen man Dinge eingeben kann oder etwas ausgegeben wird. Oft werden Teile der Website verändert.

Es gibt unterschiedliche Technologien (wie z.B. CSS, JavaScript, Flash, AJAX oder JSON), durch die das Aussehen und Verhalten einer Website beeinflusst werden kann. Das Grundgerüst ist jedoch HTML (HyperText Markup Language), ohne das keine Websites existieren könnten. Wenn die Website vom Client, d.h. dem Browser, dargestellt wird, wird als erstes das HTML gelesen.

HTML ist ein internationaler Standard, weiterentwickelt und gewartet vom World Wide Web Consortium (W3C) und Web Hypertext Application Technology Working Group (WHATWG). Die WHATWG betrachtet HTML als sich ständig weiteretwickelnder "living standard", wohingegen das W3C an neuen "snapshots", sowie an der Weiterentwicklung von HTML (momentan HTML 5.1) arbeitet.

Die HTML-Spezifikation definiert die Elemente, die in HTML oder in der strengeren XML-Auszeichnungssprache (Extensible Markup Language) benutzt werden können. HTML beschreibt nicht Formatierung und Design, sondern die Gliederung des Inhalts. Um das Aussehen einer Website anzupassen, sollte CSS verwendet werden, nicht HTML.

Dieser Artikel ist eine Einführung in HTML. Falls du dich schon einmal gefragt hast, was hinter der Kulisse eines Webbrowser passiert, hilft dir dieser Artikel, um dich weiterzubilden.

Die Geschichte von HTML

Ende der 1980er-Jahren entwickelte Tim Berners-Lee, ein Physiker bei CERN (die europäische Organisation für Kernforschung) eine Möglichkeit für Wissenschaftler, Dokumente über das Internet auszutauschen. Davor konnten Daten nur als unformatierter Text oder durch Technologien wie  E-Mail, FTP (File Transfer Protocol) oder Usenet-basierte Foren ausgetauscht werden. HTML nutzte ein ermöglicht es, Inhalte auf einem Server zu speichern und diese mit Hilfe eines Browser auf einen entfernten Computer zu übertragen und darzustellen. Es vereinfacht den Zugang zu Informationen und ermöglicht die Anzeige von gegliederten Inhalten (wie z.B. die Anordnung von Texten und das Anzeigen von Bildern). 

Was ist HTML?

HTML ist eine Auszeichnungssprache. Es sagt dem Webbrowser, was er anzeigen soll. HTML trennt den "Inhalt" (Text, Bilder, Musik, Videos, usw.) von der "Präsentation" (der Defintion von Inhaltstypen und Anweisungen, wie diese dargestellt werden sollen). HTML benutzt einen vordefinierten Satz von Elementen, um Inhaltstypen zu identifizieren. Ein Element enthält ein oder mehrere Tags, die Inhalt enthalten oder betonen. Tags werden von spitzen Klammern umschlossen. Außerdem enthält das schließende Tag, das das Ende kennzeichnet, einen Slash als Prefix.

Als Beispiel nehmen wir das Paragraphen-Element, das aus einem vorangestellten »<p>« – Tag und einem abschließenden »</p>« – Tag besteht. Das folgende Beispiel enthält einen Paragraphen welcher in einem HTML–Paragraphen–Element eingeschlossen ist.

<p>Du fängst an, HTML zu lernen.</p>

Wird dieser Inhalt in einem Browser angezeigt, sieht das wie folgt aus:

Der Inhalt der einzelnen Tags wird von verschiedenen Browsern u.U. unterschiedlich angezeigt.

In einem Element, mit beliebigem Inhalt, können weitere Elemente eingeschlossen werden. In diesem Beispiel ist ein Betonungselement (»emphasis«) in einem Paragraphenelement eingebettet. Dieses Element fügt eine Hervorhebung zu einem Wort oder einem Satzteil.

<p>Du <em>fängst an</em>, HTML zu lernen.</p>

So wird dieser Teil im Browser aussehen:

Einige Elemente können keine anderen Elemente enthalten. Als Beispiel wird das Bild–Tag (»<img>«) verwendet, das einen Dateinamen als Quell–Attribut und ein beschreibendes Attribut enthält.

<img src="smileyface.jpg" alt="Smiley Face">

Üblicherweise wird ein Slash(»/«) vor der schließenden spitzenden Klammer eingefügt, um das Ende des Tags zu Kennzeichnen. Hier zeigt sich der Unterschied zwischen HTML und XHTML. In HTML ist dieser Slash optional, aber in XHTML ist dieser Slash notwendig, um Schemakonform zu bleiben. XHTML enthält ein Schema, das HTML–Elemente implementiert und Fehler schmeißt, wenn das XML nicht valide ist.

Der nächste Teil des Artikels geht bezieht sich auf Konzepte, die tiefer ins Detail gehen. Möchtest du HTML in Aktion sehen, dann teste unseren interaktiven Online–Editor Mozilla Thimble aus. Außerdem stellen wir eine Referenzliste mit Beschreibung von vorhanden HTML Elementen zur Verfügung.

Elemente — Die Grundbausteine

HTML enthält einen Satz von Elementen. Elemente beschreiben den semantischen Sinn von ihrem Inhalt. Elemente beinhalten alles was in Start– und End–Tag vorkommt, auch die Tags selber. Als Beispiel kennzeichnet das »<p>«– Element einen Paragraphen oder das »<img>«–Element ein Bild. Auf der HTML Elements Seite ist eine komplette Liste von Elementen zu finden.

Einige Elemente haben eine präzise Bedeutung, wie z.B. »Das ist ein Bild«, »Das ist eine Überschrift« oder »Das ist eine geordnete Liste«. Andere Elemente lassen einen gewissen Spielraum zu, wie z.B. »Das ist ein Teil der Seite« oder »Das ist ein Teil des Textes«. Weitere Elemente werden aus technischen Gründen verwendet, wie z.B. »Das sind Informationen zur Identifizierung der Seite, die nicht dargestellt werden sollen«. Unabhängig davon haben alle HTML-Elemente eine semantische Bedeutung.

Die meisten Elemente können weitere Elemente enthalten, um eine hierarchische Struktur zu erstellen. Eine sehr einfache, aber komplette Webseite sieht wie folgt aus:

<html>
  <body>
    <p> you are in your begining stage of HTML</p>
  </body>
</html>

Wie man sieht, schließen <html>–Elemente alles in dem Dokument ein. Das  <body>–Element schließt den Inhalt ein. Diese Struktur wird häufig als Baum bezeichnet. Das <html>–Element ist die Wurzel und das <body>– und das <p>–Element sind die Zweige. Diese hierarchische Struktur wird als DOM: Document Object Model bezeichnet.

Tags

HTML–Dokumente werden als unformatierter Text (»Plain Text«) geschrieben. Sie können in einem beliebigen Texteditor erstellt werden, in dem »Plain Text« gespeichert werden kann, wie z.B. Notepad, Notepad++, oder Sublime. Die meisten HTML–Autoren verwenden einen Editor der Syntax-Highlighting und weitere Arbeitserleichterungen unterstützt. Tags können in Großbuchstaben oder in Kleinbuchstaben geschrieben werden, wobei das W3C (ein Konsortium, das den HTML Standard wartet und weiterentwickelt) die Kleinbuchstabierung empfiehlt. Außerdem wird von XHTML die Buchstabierung in kleinen Buchstaben erwartet.  

HTML fügt allem eine spezielle Bedeutung zu, dass mit einem kleiner–als–Zeichen ("<") beginnt und einem größer–als–Zeichen (">") endet. Eine Auszeichnung (markup) wird als tag bezeichnet. Stelle immer sicher, dass das Tag geschlossen ist, da einige Tags unerwartete Fehler produzieren können.

Hier ein einfaches Beispiel:

<p>Das ist ein Text in einem Paragraphen.</p>

In diesem Beispiel ist ein startendes Tag und ein schließendes Tag zu sehen.  Schließende Tags sind die Gleichen, wie die öffnenden Tags, mit der Ausnahme, dass sie einen Slash beinhalten, der direkt nach dem kleiner–als–Zeichen gesetzt wird. Die meisten Elemente, die in HTML geschrieben werden, entahlten ein Start– und ein Ende–Tag. Diese sollten richtig verschachtelt werden, sodass die schließenden Tags in der umgekehrten Reihenfolge der öffnenden Tags geschrieben sind. Die richtige Verschachtelung ist eine Regel die befolgt werden muss, um gültigen (validen) Code zu schreiben. 

Das ist ein Beispiel von validem  Code:

<em>I <strong>really</strong> mean that</em>.

Hier ein Beispiel mit invalidem Code:

Invalid: <em>I <strong>really</em> mean that</strong>.

In dem erstem Beispiel ist zu sehen, dass die Kindelemente zuerst geschlossen werden, bevor das Elternelement geschlossen wird. In dem Negativbeispiel wird das Kindelement erst nach dem Elternelement geschlossen.

Einige Elemente enthalten keinen Text oder andere Elemente. Diese leeren Elemente benötigen kein schließendes Tag. Hier ein Beispiel:

<img src="smileyface.jpg">

Es ist aber gängige Praxis leere Elemente mit einem Slash vor der schließenden spitzen Klammer zu versehen. In XHTML ist dies sogar verpflichtend.

<img src="smileyface.jpg" />

In HTML hat der Slash keine technische Funktion, aber es wird empfohlen alle Tags zu schließen.

Attribute

Ein Start-Tag kann zusätzliche Informationen enthalten. Diese Informationen werden Attribute genannt. Diese Attribute bestehen aus zwei Teilen:

• Ein Attributname
• Ein Attributwert

Es gibt Attribute, die nur einen Wert enthalten. Diese Attribute sind boolsche Wert (Wahr oder Falsch) und können abgekürzt werden, indem nur der Attributname notiert wird oder indem der Attributwert leer gelassen wird. Die folgenden drei Beispiele haben die gleiche Bedeutung:

<input required="required">

<input required="">

<input required>

Attributewerte die nur ein Wort oder eine Nummer enthalten, können ohne Anführungszeichen aufgeschrieben werden. Sobald der Wert aus zwei oder mehreren Zeichen besteht, die mit einem Leerzeichen getrennt sind, muss der Wert in Anführungszeichen eingeschlossen sein. Es ist möglich die Werte in Hochkommata (') oder in Anführungszeichen (") einzuschließen. Die meisten Entwickler bevorzugen es immer Anführungszeichen oder Hochkommata zu nutzen, um Fehler im Vorfeld zu vermeiden und den Code lesbarer zu gestalten. Das folgende Beispiel enthält einen Fehler.

<p class=foo bar> (Vermeide diese Fehler, da sie was anderes bedeuten, als du wahrscheinlich glaubst.)

In diesem Beispiel sollte der Wert natürlich so geschrieben werden "foo bar", aber durch die fehlenden Anführungszeichen wird der Code wie folgt interpretiert:

<p class="foo" bar="">

Bennante Zeichenreferenzen

Bennante Zeichenreferenzen (auch Entities genannt) werden benutzt, um Zeichen darzustellen die eine spezielle Bedeutung in HTML haben. Zum Beispiel interpretiert HTML das kleiner-als und das größer-als Zeichen als Trennsymbol. Soll ein größer-als Zeichen im Text dargetstellt werden, müssen Zeichenreferenzen benutzt werden. Im folgenden werden vier Entities vorgestellt:

• > löst das größer-als Zeichen auf (>)
• < löst das kleiner-als Zeichen auf (<)
• & löst das Kaufmanns–Und auf (&)
• " löst das Anführungszeichen auf (")

Es gibt noch viele weitere sog. Entities, wobei diese vier die wichtigsten sind, denn diese Zeichen haben in HTML eine spezielle Bedeutung. Weitere Entities gibt es zum Beispiel für Umlaute, Währungssymbole und andere Sonderzeichen.

Kommentare und Doctype

Zusätzlich zu den Tags, Textinhalt und Entities muss ein HTML-Dokument eine Doctype–Deklaration in der ersten Zeile enthalten. Der Doctype ist kein HTML–Tag, sondern eine Anweisung für den Browser, in der die Version steht, in der die HTML–Seite geschrieben wird.

In HTML 4.01 referenziert der Doctype zu einer DTD(Document Type Definition). Es gibt drei unterschiedliche Doctype–Deklarationen in HTML 4.01.

HTML 4.01 Strict

Diese DTD enthält alle HTML–Elemente und Attribute, die nicht veraltet oder ausgedacht sind wie z.B. font. Außerdem sind Framesets nicht erlaubt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Diese DTD enthält alle HTML–Elemente und Attribute, sogar die veraltet oder ausgedacht sind wie z.B. font. Außerdem sind Framesets nicht erlaubt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Diese DTD ist identisch zu HTML 4.01 Transitional, erlaubt aber zusätzlich Framesets.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "https://www.w3.org/TR/html4/frameset.dtd">

In HTML 5 gibt es nur noch eine Deklaration:

<!DOCTYPE html>

Der Doctype hat eine lange und komplizierte Geschichte. Es reicht momentan aber zu Wissen, dass der Doctype dem Browser erzählt, wie dieser die Seite interpretieren soll. Außerdem wird das CSS an den W3C Standard angepasst, somit wird nicht vorgetäuscht, dass es ein Internet Explorer aus den 90-Jahren ist (Siehe quirks mode).

In HTML können Kommentare eingefügt werden, die in dem Browser nicht dargestellt werden. Diese Funktion kann genutzt werden, um Teile des HTML's zu erklären, z.B. für Personen die an der Seite arbeiten oder für sich selber. Um Kommentare einzufügen, muss der Text von folgender Zeichenkombination eingeschlossen werden:

<!-- Das ist ein Kommentar, der im Browser nicht dargestellt wird. -->

Ein kleines, aber vollständiges HTML-Dokument

Wenn nun alle Teile zusammenfügt werden, erhalten wir ein kleines aber vollständiges und valides HTML–Dokument. Wer möchte kann den Text kopieren,  in einen beliebigen Editor einfügen und als helloWorld.html speichern. Beim Speichern darauf achten, dass das Dokument mit dem UTF-8 Charset (Zeichensatz) gespeichert wird. Dann kann das Dokument mit einem beliebigen Browser geöffnet werden.

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Ein kleines Dokument</title>
</head>
<body>
  <h1>Hallo Welt</h1>
  <!-- Notiz am Rande -->
  <p>Hey Mama, guck mal! Ich schreib im Internet mit <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>