Was ist HTML?
HTML (HyperText Markup Language) ist die Sprache, die festlegt, woraus eine Webseite besteht: Überschriften, Absätze, Listen, Links und Formulare. Wer sie sinnvoll einsetzt, baut Seiten, die Menschen, Suchmaschinen und Screenreader gleich gut lesen können.
Denken Sie an den Mensaplan Ihrer Hochschule. Ein Foto davon sieht gleich aus, sagt einem Programm aber nichts. Erst die Struktur macht aus Text eine Seite, die ein Computer versteht.
Am Ende dieser Lektion
Notiz
Ich kann eine Seite mit aussagekräftigem HTML gliedern.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Element | ein Teil einer Seite, zum Beispiel ein Absatz | <p>Hallo</p> |
| Tag | die Markierung, die ein Element öffnet oder schließt | <h1> |
| Attribut | eine Angabe im öffnenden Tag | href="plan.html" |
| Überschrift | ein Titel, der einen Abschnitt benennt | <h2> |
| Landmarke | ein Element, das einen großen Bereich der Seite benennt | <nav> |
| Formular | ein Bereich, in dem Menschen etwas eingeben und absenden |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Ein Element besteht aus Tags und Inhalt
Ein Element hat einen öffnenden Tag, einen Inhalt und einen schließenden Tag. In <p>Linsensuppe</p> ist <p> der öffnende Tag, Linsensuppe der Inhalt und </p> der schließende Tag.
Ein Attribut steht im öffnenden Tag und gibt mehr Auskunft. In <a href="plan.html"> sagt href, wohin der Link führt.
Probieren Sie ein Element aus
<h1>Mensaplan</h1>
<p>Heute gibt es <strong>Linsensuppe</strong> für 2,80 €.</p>
<a href="https://example.org/plan">Wochenplan</a>
<!-- Ändern Sie das Gericht und den Preis und starten Sie die Seite neu. -->
Überschriften bilden die Gliederung
Es gibt sechs Ebenen, von h1 bis h6. Die h1 nennt das Thema der ganzen Seite und kommt einmal vor. Eine h2 gliedert einen Abschnitt, eine h3 einen Unterabschnitt.
Springen Sie keine Ebene über. Auf eine h1 folgt eine h2, nicht gleich eine h3. Screenreader lesen die Überschriften vor, und viele Menschen springen darüber durch die Seite.
Ein Beispiel: Überschriften als Gliederung
| Tag | Text | Ebene |
|---|---|---|
| h1 | Mensaplan | Thema der Seite |
| h2 | Heute | Abschnitt |
| h3 | Vegetarisch | Unterabschnitt |
| h3 | Mit Fleisch | Unterabschnitt |
| h2 | Getränke | Abschnitt |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Das Lab zeigt die Struktur einer echten Seite
Im Lab liegt die kleine Seite site/index.html, ein englischer "Lunch menu". Zwei Skripte lesen sie wie ein Browser, Tag für Tag.
Die Skripte geben englische Wörter aus, zum Beispiel tags in all und die Namen der Tags. Starten Sie zuerst das Zählen, dann die Gliederung.
Die Tags der Seite zählen
docker exec jupyter python3 steps/tags.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Nur die Überschriften ausgeben
docker exec jupyter python3 steps/outline.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Ein häufiger Fehler
Warnung
Viele nehmen eine h3, weil die Schrift kleiner aussieht. Eine Überschrift sagt aber, wie ein Abschnitt in die Gliederung gehört. Die Größe stellen Sie mit CSS ein. Wählen Sie die Ebene nach dem Inhalt.
Landmarken und Listen benennen, was etwas ist
header ist der Kopf, nav enthält die wichtigsten Links, main den Hauptinhalt und footer den Fuß. Ein section fasst einen Abschnitt zusammen.
Gerichte gehören in eine Liste: ul für eine Liste ohne Reihenfolge, ol für eine mit Reihenfolge, jeder Punkt in einem li. Ein form enthält Felder und eine Schaltfläche zum Absenden.