Was ist HTML?

HTML steht für HyperText Markup Language. Das klingt sperrig, meint aber etwas Einfaches: Du nimmst deinen Inhalt und markierst, was er ist. Das hier ist eine Überschrift, das ein Absatz, das ein Link. Der Browser liest diese Markierungen und baut daraus die Seite.

Noch etwas zur Bedienung, das für den ganzen Kurs gilt: Jeden Codeblock in diesem Artikel kannst du anklicken. Er landet dann im Editor, wo du ihn ändern darfst, und im Reiter „Browser“ läuft deine Seite sofort mit. Welches Beispiel gerade offen ist, siehst du an der Reiterleiste über dem Editor. Ausprobieren kostet hier nichts, mit „Zurücksetzen“ holst du das Original zurück.

01 / 04Auszeichnen heißt sagen, was etwas ist

Schau dir zuerst diesen Text an:

Mein Kochblog
Hier sammle ich Rezepte, die auch unter der Woche klappen.
Alle Rezepte ansehen

Drei Zeilen reiner Text: eine Überschrift, ein Satz dazu und ein Link. Für dich als Mensch ist sofort klar, was davon was ist. Auf der Seite siehst du, dass der Browser das nicht weiß. Er klebt alles zu einer einzigen Zeile zusammen, alles gleich groß, und der Link ist keiner.

Jetzt derselbe Text, aber jede Zeile ist markiert:

<h1>Mein Kochblog</h1>
<p>Hier sammle ich Rezepte, die auch unter der Woche klappen.</p>
<a href="/rezepte">Alle Rezepte ansehen</a>

h1 sagt „das ist die wichtigste Überschrift“, p sagt „das ist ein Absatz“, a sagt „das ist ein Link“. Der Browser weiß plötzlich Bescheid: Die Überschrift wird groß und fett, der Absatz bekommt Abstand, der Link wird klickbar und blau.

Genau das ist Markup. Du schreibst nichts Neues hin, du sagst nur, welche Rolle dein Text spielt. Die Darstellung kommt danach von allein.

02 / 04HTML ist keine Programmiersprache

Das wird oft durcheinandergeworfen, deshalb gleich am Anfang: HTML rechnet nicht. Es gibt keine Bedingungen, keine Schleifen, keine Variablen. Du kannst mit HTML nicht sagen „wenn der Nutzer eingeloggt ist, dann zeig das hier“. HTML beschreibt Struktur und Bedeutung, mehr nicht.

Das ist keine Schwäche, sondern die Arbeitsteilung im Web. Ein Bild, das trägt: Eine Webseite ist wie ein Haus. HTML ist der Rohbau mit Wänden, Türen und Fenstern. CSS ist die Einrichtung mit Farben und Möbeln. JavaScript ist die Technik mit Lichtschaltern und Heizung. Der Rohbau steht immer zuerst, und ohne ihn hat der Rest nichts, woran er sich festhalten kann.

Praktisch heißt das: Solange du HTML lernst, kümmerst du dich nicht ums Aussehen. Dass eine h1 groß und fett erscheint, ist eine Voreinstellung des Browsers und keine Entscheidung von dir. Im ganzen Kurs bleibt es dabei.

03 / 04Der Browser baut daraus einen Baum

Rufst du eine Seite auf, holt sich der Browser die HTML-Datei vom Server und liest sie von oben nach unten. Aus den Markierungen baut er im Speicher eine Struktur: Was steckt in was drin? Diese Struktur heißt DOM, das Document Object Model. Sie ist ein Baum aus Elementen, die ineinander liegen.

Am besten sieht man das an einer Liste:

<h1>Mein Kochblog</h1>
<p>Drei Gerichte, die immer gehen:</p>
<ul>
  <li>Linsensuppe</li>
  <li>Ofengemüse</li>
  <li>Pfannkuchen</li>
</ul>
<img src="teller.jpg" alt="Ein Teller Linsensuppe">

Die drei Gerichte sind je ein li, und alle drei stecken in einem ul. Dadurch weiß der Browser, dass sie zusammengehören, und stellt sie als Aufzählung mit Punkten dar. Das Bild darunter lädt nicht, weil es die Datei nicht gibt. Dann zeigt der Browser den alt-Text an, und du siehst nebenbei, wofür der gut ist.

Den genauen Ablauf musst du nicht auswendig können. Es reicht der Kern: Du schreibst Markup, der Browser macht daraus einen Baum, und diesen Baum siehst du als fertige Seite. Wie du diesen Baum sauber aufbaust, ist im Grunde der ganze Kurs.

04 / 04Was neben dem Browser noch liegt

Der Reiter „Browser“ ist der, den du fast immer brauchst. Zwei weitere liegen daneben, und beide sind gleich erklärt.

Im Reiter „Netzwerk“ steht, was der Browser für die Seite geholt hat. Bei diesem letzten Beispiel sind das zwei Zeilen: die Seite selbst und teller.jpg, das nicht geladen hat. Am Reiter steht deshalb eine 2, und weil eine der beiden Anfragen schiefging, ist die Zahl rot. Das siehst du, ohne den Reiter zu öffnen. Bei Bildern und Videos ist das später der schnellste Weg zu einem Tippfehler im Pfad.

Der Reiter „Console“ bleibt in diesem Kurs meistens leer. Er zeigt, was JavaScript ausgibt, und JavaScript kommt hier nicht vor. Nützlich ist er trotzdem, denn ganz unten steht eine Eingabezeile: Dort kannst du dem Browser eine Frage zu deiner Seite stellen. Am Ende des Kurses, in Abschnitt 11, wird daraus ein richtiges Werkzeug.

Auf einem breiten Bildschirm kommen in der Browser-Leiste noch zwei Knöpfe dazu: das Fadenkreuz, mit dem du ein Element auf der Seite antippst und darunter im Auskunftsstreifen seine Maße und Werte abliest (das Ganze heißt der Inspector), und das Vollbild, in dem sich die Breite der Seite einstellen lässt. Auf einem schmalen Bildschirm fehlen beide. Wo sie gebraucht werden, sagt es die Lektion dazu.