HTML-Gerüst und Semantik

In diesem Kapitel lernst du die Sprache kennen, aus der jede Webseite besteht. Wir gehen vom Kleinen zum Großen vor: vom einzelnen Element über das Dokument bis zur Gliederung einer ganzen Seite. Als Beispiel entsteht die Website eines fiktiven Vereins, des Lauftreffs Morgenrunde. Sie bleibt heute bewusst schlicht, denn zuerst kommt die Struktur und erst morgen die Gestaltung.

Was du am Ende kannst

• erklären, was HTML ist und was eine Auszeichnungssprache tut
• den Aufbau eines Elements benennen: Tags, Inhalt und Attribute
• das Grundgerüst einer HTML-Seite schreiben und seine Teile erklären
• Block-Elemente und Inline-Elemente unterscheiden
• eine Seite mit Überschriften und semantischen Elementen gliedern

Live-Coding zum Mitmachen

⤓ demo-01-geruest.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: index.html

Was ist HTML?

HTML steht für HyperText Markup Language. Es ist keine Programmiersprache, denn es rechnet nichts und trifft keine Entscheidungen. Es ist eine Auszeichnungssprache: Du versiehst Text mit Markierungen, die sagen, was dieser Text ist, zum Beispiel eine Überschrift, ein Absatz oder eine Liste.

Der Browser versteht Text ohne solche Markierungen nicht als gegliedert. Beide Kästen unten enthalten denselben Text:

Oben ohne Auszeichnung, unten mit

<div class="kasten">
  Unsere Laufgruppen

  Wir laufen dreimal pro Woche.

  Montag
  Mittwoch
  Samstag
</div>
<div class="kasten">
  <h3>Unsere Laufgruppen</h3>
  <p>Wir laufen dreimal pro Woche.</p>
  <ul>
    <li>Montag</li>
    <li>Mittwoch</li>
    <li>Samstag</li>
  </ul>
</div>

Im oberen Kasten fasst der Browser alles zu einem Fließtext zusammen, denn Zeilenumbrüche und mehrere Leerzeichen im Quelltext haben keine Bedeutung. Struktur entsteht erst durch die Auszeichnung.

Der Aufbau eines Elements

Der Grundbaustein von HTML ist das Element. Die meisten Elemente bestehen aus drei Teilen:

<p class="hinweis">Fragen? Schreib uns.</p>
└────────┬────────┘└────────┬─────────┘└─┬┘
     Start-Tag           Inhalt       End-Tag

• Das Start-Tag nennt in spitzen Klammern den Namen des Elements.
• Der Inhalt ist das, was ausgezeichnet wird. Er kann Text oder weitere Elemente enthalten.
• Das End-Tag sieht aus wie das Start-Tag, hat aber zusätzlich einen Schrägstrich.

Attribute

Im Start-Tag können Attribute stehen. Sie geben zusätzliche Angaben, die nicht zum sichtbaren Inhalt gehören, und bestehen aus einem Namen und einem Wert in Anführungszeichen:

<a href="termine.html">Zu den Terminen</a>

Hier sagt das Attribut href, wohin der Link führt. Mehrere Attribute trennst du durch Leerzeichen.

Verschachtelung

Elemente dürfen andere Elemente enthalten. Dabei muss das innere Element geschlossen sein, bevor das äußere endet:

<p>Wir laufen <strong>dreimal</strong> pro Woche.</p>     <!-- richtig -->
<p>Wir laufen <strong>dreimal</p></strong> pro Woche.     <!-- falsch: überkreuzt -->

Leere Elemente

Einige Elemente haben keinen Inhalt und deshalb auch kein End-Tag, darunter img für Bilder, br für einen Zeilenumbruch und input für Eingabefelder:

<img src="bilder/laufstrecke.svg" alt="Der Weg durch den Stadtpark.">

Kommentare

Zwischen <!-- und --> stehen Notizen, die der Browser nicht anzeigt. Sie stehen dennoch im Quelltext, den jeder einsehen kann, und gehören deshalb nie Passwörter oder Interna.

Der Aufbau eines Dokuments

Einzelne Elemente ergeben noch keine vollständige Seite. Jede HTML-Datei hat dasselbe Grundgerüst. Emmet erzeugt es dir in VS Code mit ! und Tab:

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lauftreff Morgenrunde</title>
</head>
<body>
  <!-- Alles Sichtbare steht hier -->
</body>
</html>

Zeile	Aufgabe
<!doctype html>	schaltet den modernen Standardmodus ein. Ohne sie arbeitet der Browser im „Quirks Mode“ mit dem Verhalten alter Browser
<html lang="de">	umschließt das ganze Dokument und gibt die Sprache an, nach der sich etwa Aussprache im Screenreader und Silbentrennung richten
<head>	enthält Angaben über die Seite, die nicht im Seiteninhalt erscheinen
<meta charset="utf-8">	legt die Zeichenkodierung fest, damit „ä“ und „€“ richtig dargestellt werden
<meta name="viewport" …>	sorgt für die richtige Darstellung auf Mobilgeräten (mehr an Tag 4)
<title>	ist der Text im Browser-Tab, in Lesezeichen und Suchergebnissen
<body>	enthält alles, was auf der Seite sichtbar ist

Die Datei nennst du index.html. Diesen Namen liefert ein Webserver aus, wenn in der Adresse keine bestimmte Datei genannt ist. Sie wird also zur Startseite.

Block-Elemente und Inline-Elemente

Innerhalb von body arbeitest du auf zwei Ebenen, und diese Unterscheidung begleitet dich durch die ganze Schulung:

• Block-Elemente bilden die Abschnitte deines Textes. Sie beginnen in einer neuen Zeile und nehmen die volle Breite ein.
• Inline-Elemente zeichnen Wörter innerhalb eines Abschnitts aus. Sie laufen im Text mit und erzwingen keine neue Zeile.

Block-Elemente umrandet, Inline-Elemente gelb

<h3>Unsere Laufgruppen</h3>
<p>Wir laufen <strong>dreimal</strong> pro Woche durch den Stadtpark.</p>
<p>Die <em>Termine</em> stehen auf der <a href="#">Terminseite</a>.</p>
<ul>
  <li>Montag</li>
  <li>Mittwoch</li>
</ul>

Rahmen und gelbe Markierung sind nur für dieses Beispiel ergänzt. Sie machen sichtbar, wie der Browser die Elemente ohnehin anordnet.

	Block-Elemente	Inline-Elemente
Aufgabe	gliedern die Seite in Abschnitte	zeichnen Teile eines Textes aus
Anordnung	untereinander	nebeneinander im Textfluss
Breite	die gesamte verfügbare Breite	nur so breit wie der Inhalt
Beispiele	h1 bis h6, p, ul, ol, li, table, form, section, div	a, strong, em, code, time, span

Daraus ergibt sich eine einfache Regel für die Verschachtelung: Inline-Elemente stehen in Block-Elementen. Ein Link gehört in einen Absatz und nicht umgekehrt. Auch ein Block in einem Absatz funktioniert nicht: p kann keine Liste und keinen weiteren Absatz enthalten.

Genauer betrachtet

Das aktuelle HTML-Regelwerk spricht nicht mehr von Block und Inline, sondern legt für jedes Element fest, welche Inhalte es enthalten darf. Das erklärt Ausnahmen wie a, das auch ganze Blöcke umschließen darf. Block und Inline beschreiben dagegen die Darstellung, die du mit CSS sogar ändern kannst. Für den Einstieg trifft die Unterscheidung aber sehr gut. An Tag 3 kommen wir mit display darauf zurück.

Überschriften bilden die Gliederung

h1 bis h6 sind sechs Überschriftenebenen. Sie funktionieren wie die Nummerierung in einem Inhaltsverzeichnis und bestimmen nicht die Schriftgröße.

• Jede Seite hat eine h1, die ihren Inhalt benennt.
• Die Ebenen folgen aufeinander: Auf h2 folgt h3, nicht h5.
• Die Größe regelst du später mit CSS. Wähle die Überschrift nach ihrem Rang, nicht nach ihrem Aussehen.

Viele Screenreader-Nutzer springen über die Überschriften durch eine Seite. Die Gliederung ist für sie das, was für dich das Überfliegen ist.

Semantik: Die Bereiche einer Seite

Semantik bedeutet, dass ein Element seine Bedeutung ausdrückt. Eine ganze Seite ließe sich aus div bauen und mit CSS passend gestalten. Für das Auge wäre sie gleich. Screenreader, Suchmaschinen, der Lesemodus des Browsers und deine Kollegen lesen die Bedeutung aber aus den Elementen.

HTML hat deshalb eigene Block-Elemente für die typischen Bereiche einer Seite:

Die Bereiche einer typischen Seite

<header>Vereinsname <nav>Start · Termine · Kontakt</nav></header>
<main>
  <article>Der Bericht vom Sommerlauf</article>
  <aside>Tipp der Woche</aside>
</main>
<footer>Impressum</footer>

Element	Bedeutung	Faustregel
header	Kopfbereich der Seite oder eines Abschnitts	Logo, Titel, Menü
nav	Hauptnavigation	nur für wichtige Linkgruppen
main	der Hauptinhalt	genau einmal pro Seite
article	in sich geschlossener Inhalt	ergäbe auch allein Sinn, etwa ein Bericht
section	thematischer Abschnitt	hat fast immer eine Überschrift
aside	Randinhalt	Tipp, verwandte Links
footer	Fußbereich	Impressum, Kontakt
div	keine Bedeutung	nur, wenn kein anderes Element passt

div ist das Block-Element ohne Bedeutung, span das entsprechende Inline-Element. Beide sind die letzte Wahl und dienen vor allem als Haken für CSS.

Live-Coding: Die Startseite

Im Ordner starter liegt der Text der Startseite ohne jedes Tag. Wir gehen so vor:

1. Die Datei im Browser öffnen: Der Text läuft zu einem einzigen Absatz zusammen.
2. Das Grundgerüst ergänzen und einen title vergeben.
3. Überschrift und Absatz auszeichnen.
4. Das Menü als Liste von Links anlegen.
5. Kopf, Menü, Hauptinhalt und Fuß in semantische Bereiche setzen.

Das Ergebnis:

index.html

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lauftreff Morgenrunde</title>
</head>
<body>
  <header>
    <p>Lauftreff Morgenrunde</p>
    <nav aria-label="Hauptmenü">
      <ul>
        <li><a href="index.html">Start</a></li>
        <li><a href="termine.html">Termine</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Gemeinsam in den Tag laufen</h1>
    <p>Wir laufen dreimal pro Woche durch den Stadtpark – egal ob du gerade anfängst oder für deinen ersten Marathon trainierst.</p>
  </main>

  <footer>
    <p>Lauftreff Morgenrunde e. V. – ein fiktiver Verein für diese Schulung</p>
  </footer>
</body>
</html>

Die Seiten „Termine“ und „Kontakt“ entstehen erst später am Tag. Bis dahin führen die beiden Menülinks ins Leere.

Übung

Starter für die Übung

⤓ uebung-01-geruest.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: index.html, ueber-uns.txt

Der Verein braucht eine Seite „Über uns“. Der Text liegt in ueber-uns.txt.

Stufe 1: Grundlage

Erstelle ueber-uns.html mit vollständigem Gerüst, passendem title und dem Text. Verwende eine h1 und passende h2-Überschriften sowie p für die Absätze.

Stufe 2: Inline-Elemente

Zeichne im Text ein wichtiges Wort mit strong und eine Betonung mit em aus. Prüfe mit den DevTools, dass beide innerhalb eines Absatzes stehen.

Stufe 3: Semantik

Übernimm header, nav und footer von der Startseite und setze den Inhalt in main. Fasse den Bericht als article zusammen und jeden Unterpunkt als section. Der Tipp der Woche gehört in ein aside. Verlinke die neue Seite im Menü beider Seiten.

Für Schnelle

Prüfe deine Seite mit dem W3C-Validator: Quelltext einfügen und auf Fehler achten. Baue danach absichtlich einen Fehler ein, indem du ein End-Tag löschst. Wie reagiert der Validator, wie der Browser?