Das HTML-Dokument: Tags, Attribute und Semantik

Problem

Der Preis ist ein Link

Ein Kollege hat die Seite eines Produkts gebaut. Du öffnest sie, und der Preis ist blau und unterstrichen, und ein Klick auf „In den Warenkorb“ führt zu anderen Broten. Im Code steht um den Preis kein Link.

HTML, CSS, JS

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Dobrudzha-Brot</title>
  </head>
  <body>
    <h1>Dobrudzha-Brot</h1>
    <p>Siehe auch <a href="/bread">weitere Brote</p>
    <p>Preis: 1,80 €</p>
    <button type="button">In den Warenkorb</button>
  </body>
</html>

Der Browser zeigt keinen Fehler, und die Konsole ist leer. Klick auf „In den Warenkorb“: Die Konsole sagt, dass das ein Link zu /bread ist. Der Fehler steht in Zeile 9: Das <a> wird geöffnet, aber nie geschlossen. Der Browser zeigt den Text nicht Zeile für Zeile. Er baut daraus zuerst etwas anderes, und dieses andere ist der Grund, warum der Preis ein Link ist.

Die Idee

Elemente, Tags, Attribute

HTML ist Text, der sagt, was auf der Seite steht. Jedes Stück ist ein Element: eine Überschrift, ein Absatz, ein Link, ein Button. Ein Element beginnt mit einem öffnenden Tag und endet mit einem schließenden:

<a href="/cart">Warenkorb</a>

<a …> ist das öffnende Tag, und </a> ist das schließende: derselbe Name mit einem /.
href="/cart" ist ein Attribut: ein Name und ein Wert im öffnenden Tag. Es sagt etwas über das Element: hier, wohin der Link führt.
„Warenkorb“ ist der Inhalt: der Text zwischen den beiden Tags.

Elemente stehen ineinander. Ein Absatz <p> kann einen Link enthalten, und <body> enthält alles, was du siehst. Manche Elemente haben keinen Inhalt und darum kein schließendes Tag: <meta>, <img>, <input>, <br>.

Das ganze Dokument hat immer denselben Rahmen:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Dobrudzha-Brot</title>
  </head>
  <body>
    …
  </body>
</html>

<!doctype html> sagt, dass es modernes HTML ist. lang="de" gibt die Sprache an: Ein Screenreader wählt danach seine Stimme, und der Browser trennt danach die Wörter. <head> enthält Informationen über die Seite: die Kodierung und den Titel im Browser-Tab. <body> enthält, was du siehst.

Die Idee

Vom Text zum Baum

Der Browser zeichnet den Text nicht. Er liest ihn mit einem Parser und baut einen Baum: Jedes Element ist ein Knoten, und die Elemente darin sind seine Kinder. Jedes Element hat genau ein Elternelement. Dieser Baum heißt DOM (Document Object Model). CSS und JavaScript arbeiten mit ihm, nicht mit dem Text.

Der Parser merkt sich, welche Elemente gerade offen sind. Ein öffnendes Tag erzeugt einen neuen Knoten, ein Kind des zuletzt geöffneten Elements. Ein schließendes Tag schließt das Element, und der Parser geht zurück zum Elternelement.

Wenn ein schließendes Tag fehlt, hört der Parser nicht auf. HTML hat für jeden Fehler eine Regel, und der Browser entscheidet selbst, wo er schließt. Manchmal entscheidet er anders, als du dir gedacht hast.

Sieh es dir an

Sieh zu, wie der Baum entsteht

Der Code ist das Problem von vorhin, verkürzt. Schau, welche Elemente rechts offen sind.

<body>
  <h1>Brot</h1>
  <p>Siehe auch <a href="/bread">weitere</p>
  <p>Preis: 1,80 €</p>
  <button>Hinzufügen</button>
</body>

Schritt für Schritt, in Worten

Der Parser liest den Code von oben. <body> öffnet ein Element: Hier ist es die Wurzel des Baums. Rechts stehen die Elemente, die gerade offen sind.
<h1> wird zum Kind des offenen Elements, <body>. </h1> schließt es in derselben Zeile, und der Parser geht zurück zu <body>.
<p> ist ein Kind von <body>, und <a> ist ein Kind von <p>. Jetzt sind drei Elemente offen: body, p, a.
</a> fehlt. </p> schließt den Absatz, und <a> kann nicht außerhalb davon bleiben, also wird es mitgeschlossen. Der Parser merkt es sich aber: Im Code wurde der Link nie geschlossen.
Vor dem nächsten Inhalt öffnet der Parser das gemerkte <a> noch einmal, jetzt als Kind von <body>. Diesen Link gibt es im Code nicht. Das neue <p> kommt hinein.
Der Button kommt ebenfalls in den Link.
Der Weg vom Button nach oben: button, a, body. Der Preis und der Button stehen in einem Link, und ein Klick darauf führt zu /bread. Die Korrektur ist ein </a> in Zeile 3.

Das zweite <a> steht nicht im Code, aber im Baum. Der Browser zeigt den Baum, nicht den Text. Wenn eine Seite seltsam aussieht, schaust du also in den Baum: Im Browser ist das der Bereich Elements der Entwicklertools (F12). Dort steht das zweite <a>, und im Quelltext (Seitenquelltext anzeigen) fehlt es.

Probier es aus

Repariere den Link

Korrigiere den Code so, dass die Seite genau einen Link hat: „weitere Brote“. Klick auf „Prüfen“: Die Prüfung zählt die Links der Seite.

HTML, CSS, JS

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Dobrudzha-Brot</title>
  </head>
  <body>
    <h1>Dobrudzha-Brot</h1>
    <p>Siehe auch <a href="/bread">weitere Brote</p>
    <p>Preis: 1,80 €</p>
    <button type="button">In den Warenkorb</button>
  </body>
</html>

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Dobrudzha-Brot</title>
  </head>
  <body>
    <h1>Dobrudzha-Brot</h1>
    <p>Siehe auch <a href="/bread">weitere Brote</a></p>
    <p>Preis: 1,80 €</p>
    <button type="button">In den Warenkorb</button>
  </body>
</html>

Probier es aus

Finde den Fehler

Warum ist „Lieferung in 2 Werktagen“ fett?

Wähle die Zeile mit dem Fehler.

Probier es aus

Ergänze

Welches Attribut sagt, wohin der Link führt?

<nav>
  <a ="/cart">Warenkorb</a>
</nav>

Die Idee

Elemente mit Bedeutung

Eine Seite kann nur aus <div>-Elementen bestehen. Dann weiß der Browser, dass es Kästen gibt, aber nicht, was jeder davon ist. Ein Mensch erkennt das Menü an seinem Platz und seinem Aussehen. Ein Screenreader, eine Suchmaschine und die Tastatur sehen nur den Baum.

Darum hat HTML semantische Elemente: Elemente, deren Name sagt, was der Inhalt ist.

<header>: der obere Teil der Seite: das Logo und das Menü.
<nav>: die Navigation, die Gruppe der Links zu den anderen Seiten.
<main>: der Hauptinhalt. Eines pro Seite.
<article>: etwas Ganzes, das für sich Sinn ergibt: ein Produkt, eine Bestellung, ein Beitrag.
<footer>: der untere Teil der Seite: Lieferung, Kontakt, Bedingungen.
<h1> … <h6>: die Überschriften. <h1> ist die Überschrift der Seite.

Sie sehen aus wie ein <div>. Der Unterschied ist, dass ein Screenreader „Navigation“ und „Hauptinhalt“ ansagt und man mit einer Taste dorthin springt. <div> und <span> bleiben für Kästen ohne Bedeutung: eine Gruppe, die CSS anordnen muss.

Sieh es dir an

Die Seite mit Bedeutung

Dasselbe Produkt mit semantischen Elementen. Die zweite Datei enthält ein bisschen CSS, damit die Teile sichtbar sind. Das nächste Modul handelt davon.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dobrudzha-Brot · Der Shop</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <a href="/">Der Shop</a>
      <nav>
        <a href="/bread">Brot</a>
        <a href="/milk">Milch</a>
        <a href="/cart">Warenkorb</a>
      </nav>
    </header>
    <main>
      <article>
        <h1>Dobrudzha-Brot</h1>
        <p>Weißbrot, 650 g, heute früh gebacken.</p>
        <p>Preis: <strong>1,80 €</strong></p>
        <button type="button">In den Warenkorb</button>
      </article>
    </main>
    <footer>
      <p>Lieferung in 2 Werktagen</p>
    </footer>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0; }
header, footer { background: #f3efe6; padding: 8px 16px; }
nav a { margin-right: 12px; }
main { padding: 16px; }

Die Prüfung des Beispiels findet die Teile über die Rolle: <header> ist „Kopfbereich“ (banner), <nav> ist „Navigation“, <main> ist „Hauptinhalt“, <footer> ist „Fußbereich“ (contentinfo). Ein Screenreader sieht sie genauso.

Probier es aus

Gib ihr Bedeutung

Die Seite besteht nur aus <div>-Elementen. Ersetze sie durch semantische Elemente: den oberen Teil, das Menü, den Hauptinhalt, das Produkt und den unteren Teil. Der Name des Produkts ist die Überschrift der Seite.

HTML, CSS, JS

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Frischmilch 3% · Der Shop</title>
  </head>
  <body>
    <div class="top">
      <a href="/">Der Shop</a>
      <div class="menu">
        <a href="/bread">Brot</a>
        <a href="/milk">Milch</a>
        <a href="/cart">Warenkorb</a>
      </div>
    </div>
    <div class="content">
      <div class="product">
        <div class="title">Frischmilch 3%</div>
        <p>Preis: 2,40 €</p>
        <button type="button">In den Warenkorb</button>
      </div>
    </div>
    <div class="bottom">Lieferung in 2 Werktagen</div>
  </body>
</html>

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Frischmilch 3% · Der Shop</title>
  </head>
  <body>
    <header>
      <a href="/">Der Shop</a>
      <nav>
        <a href="/bread">Brot</a>
        <a href="/milk">Milch</a>
        <a href="/cart">Warenkorb</a>
      </nav>
    </header>
    <main>
      <article>
        <h1>Frischmilch 3%</h1>
        <p>Preis: 2,40 €</p>
        <button type="button">In den Warenkorb</button>
      </article>
    </main>
    <footer>Lieferung in 2 Werktagen</footer>
  </body>
</html>

Genauer, für Neugierige

Der Parser und Fehler. Die Regeln für Fehler sind Teil des Standards (HTML Living Standard), darum bauen alle Browser aus demselben kaputten HTML denselben Baum. Der Parser hält nicht geschlossene <a>, <strong>, <em>, <b> und <i> in einer Liste (der Liste der aktiven Formatierungselemente) und öffnet sie noch einmal. Darum „läuft“ so ein Fehler die Seite hinunter.

Von selbst geschlossen. Manche Tags schließen andere ohne Fehler: <p> schließt ein offenes <p>, und <li> schließt ein offenes <li>. Also sind <li>Brot<li>Milch zwei Listeneinträge. Wir schreiben die schließenden Tags trotzdem, weil der Code dann dasselbe sagt wie der Baum.

Attribute. Bei den Namen von Tags und Attributen spielt Groß- und Kleinschreibung keine Rolle (<A HREF> ist <a href>), aber wir schreiben klein. Manche Attribute haben keinen Wert: <input required>. Die Anführungszeichen um einen Wert kann man weglassen, aber mit ihnen ist es sicherer.

<section> und <aside>. <section> ist ein Abschnitt mit einer Überschrift, ein Stück von etwas Größerem. <aside> ist Inhalt neben dem Hauptinhalt: verwandte Produkte, Werbung.

Übung

Meine Bestellung

Baue die Seite der Bestellung 1042 von Grund auf. Oben: ein Link „Der Shop“ und ein Menü mit zwei Links: „Meine Bestellungen“ und „Warenkorb“. Der Hauptinhalt: die Überschrift „Bestellung 1042“, der Status „versendet“ und zwei Produkte, jedes mit seinem Namen als Überschrift zweiter Ebene und darunter Menge und Preis (Brot: 2 × 1,80 €, Milch: 1 × 2,40 €), dann „Gesamt: 6,00 €“. Unten: „Rückgabe bis 14 Tage nach der Lieferung“.

HTML, CSS, JS

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Bestellung 1042 · Der Shop</title>
  </head>
  <body>

  </body>
</html>

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Bestellung 1042 · Der Shop</title>
  </head>
  <body>
    <header>
      <a href="/">Der Shop</a>
      <nav>
        <a href="/orders">Meine Bestellungen</a>
        <a href="/cart">Warenkorb</a>
      </nav>
    </header>
    <main>
      <h1>Bestellung 1042</h1>
      <p>Status: <strong>versendet</strong></p>
      <article>
        <h2>Dobrudzha-Brot</h2>
        <p>2 × 1,80 €</p>
      </article>
      <article>
        <h2>Frischmilch 3%</h2>
        <p>1 × 2,40 €</p>
      </article>
      <p>Gesamt: <strong>6,00 €</strong></p>
    </main>
    <footer>Rückgabe bis 14 Tage nach der Lieferung</footer>
  </body>
</html>

Test

Teste dich

1. Der Browser bekommt HTML mit einem Tag, das nicht geschlossen ist. Was tut er?Er baut trotzdem einen Baum und entscheidet selbst, wo er das Element schließtEr überspringt das Tag und zeigt den Text ohne esEr zeigt statt der Seite eine Fehlermeldung

2. Welcher Teil ist in <a href="/cart">Warenkorb</a> das Attribut?ahref="/cart"Warenkorb

a ist der Name des Tags, href ist das Attribut mit dem Wert /cart, und „Warenkorb“ ist der Inhalt des Elements.

3. Warum gehört das Menü in <nav> und nicht in <div class="menu">?<nav> sagt, was es ist: Ein Screenreader kündigt es als Navigation an, und man kann direkt hinspringenEin <div> kann keine Links enthalten<nav> sieht anders aus als <div>

Auf dem Bildschirm sehen <nav> und <div> gleich aus. Der Unterschied liegt in der Bedeutung: <nav> ist ein Landmark im Barrierefreiheitsbaum, ein <div> sagt nichts.

4. Wie viele <main> hat eine Seite?So viele, wie die Seite Abschnitte hatEines: den HauptinhaltKeines, es ist veraltet

<main> ist der Hauptinhalt der Seite, und es gibt nur eines. Die Teile darin sind <article> und <section>.

Das HTML-Dokument

Cookies