mitmario.dev

Abschnitt 1 · Lektion 2

Dein erstes HTML

HTML Im Browser 2 Min Lesezeit 3 BeispieleLektion 2 von 8

Zeit für echtes Markup. Zwei Elemente reichen für den Anfang, und beide folgen demselben Muster, das für fast alles in HTML gilt.

Öffnen, füllen, schließen

Ein Element besteht aus drei Teilen: einem öffnenden Tag, dem Inhalt und einem schließenden Tag. Der schließende Tag ist derselbe wie der öffnende, nur mit einem Schrägstrich vor dem Namen. Aus <p> wird also </p>.

Der Name in den spitzen Klammern sagt, um welche Art Element es geht. h1 steht für „heading 1“, die wichtigste Überschrift der Seite, so etwas wie der Titel. p kommt vom englischen paragraph und steht für einen Absatz. Alles zwischen den beiden Tags ist der Inhalt, den der Browser anzeigt.

So sehen die beiden zusammen aus:

Öffnender und schließender Tag 
<h1>Das ist eine Überschrift</h1>
<p>Das ist ein Absatz.</p>

Klick den Block an, dann liegt er im Editor. Ändere ruhig den Text zwischen den Tags: die Seite zieht sofort nach.

Was passiert, wenn der schließende Tag fehlt

Hier steckt genau der Fehler, der Einsteigern am häufigsten passiert:

Schließender Tag fehlt 
<h1>Das ist eine Überschrift
<p>Das ist ein Absatz.</p>

Beim h1 fehlt das </h1>. Schau auf die Seite: Der Absatz ist jetzt Teil der Überschrift und wird groß und fett dargestellt.

Das liegt daran, dass HTML fehlertolerant ist. Der Browser bricht nicht ab und zeigt keine Fehlermeldung. Er rät stattdessen, wie du es wohl gemeint hast, und macht einfach irgendwie weiter. Das ist bequem und gemein zugleich: Deine Seite ist kaputt, aber nichts sagt es dir. Sie sieht nur seltsam aus.

Setz das </h1> wieder ein, dann sortiert sich die Seite sofort. Diese Fehlersuche wirst du oft machen: Sieht etwas falsch aus, ist ein fehlender oder falsch gesetzter Tag der erste Verdächtige.

Ein Absatz ist ein Absatz

Drei p-Elemente hintereinander sehen so aus:

Mehrere Absätze 
<h1>Linsensuppe</h1>
<p>Ein Topf, eine halbe Stunde, satt für zwei Tage.</p>
<p>Linsen brauchen kein Einweichen. Das ist der halbe Grund, warum das Rezept unter der Woche funktioniert.</p>
<p>Wer mag, gibt am Ende einen Schuss Essig dazu.</p>

Jeder Absatz steht in seinem eigenen Tag-Paar, und der Browser setzt von allein Abstand dazwischen. Du musst dafür nichts tun.

Wichtig ist die Denkweise dahinter: Ein Absatz ist nicht „ein Stück Text mit Abstand drumherum“, sondern eine inhaltliche Einheit. Du markierst einen Gedanken als abgeschlossen. Dass daraus optisch ein Abstand wird, ist die Folge, nicht der Zweck.

Probier es aus: Schreib zwei Sätze in ein einziges p und setz eine Leerzeile dazwischen. Auf der Seite ändert sich nichts. Der Browser interessiert sich nicht für deine Leerzeilen, nur für deine Tags. Warum das so ist, klärt sich später in diesem Abschnitt.

Und jetzt du

Mehr brauchst du für den Anfang nicht: ein Tag-Paar öffnen, Inhalt hineinschreiben, das Paar schließen. In der Challenge schreibst du deine erste Überschrift und deinen ersten Absatz selbst.

Was du dort tippst, ist dir überlassen. Nimm ruhig ein Thema, das dich interessiert. Das macht die Übung angenehmer als „Test 123“.

Zum Mitnehmen

Der schließende Tag wird oft vergessen. Ohne ihn weiß der Browser nicht, wo dein Element aufhört, und rät. Das Ergebnis ist selten das, was du willst.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.