HTML-Elemente und Attribute: Struktur jeder Webseite

HTML zeichnet die Teile einer Seite aus, damit der Browser ihre Struktur aufbauen kann. Eine Überschrift, ein Absatz und ein Link haben unterschiedliche Bedeutungen, auch bevor du sie gestaltest. HTML beschreibt den Inhalt; CSS steuert sein Aussehen und JavaScript ergänzt das Verhalten.

Ein Element lesen

In <p>The workshop opens at noon.</p> ist <p> das Start-Tag, der Satz ist der Inhalt und </p> das End-Tag. Das Ganze ist ein Absatzelement. Der Schrägstrich kennzeichnet das End-Tag. Verwende kleingeschriebene Elementnamen, damit dein Quelltext einheitlich bleibt, auch wenn HTML Großschreibung ebenfalls akzeptiert.

Ein Attribut ergänzt Informationen innerhalb eines Start-Tags:

<a href="hours.html" title="Workshop opening hours">Opening hours</a>

Hier liefert href das Ziel und title einen Hinweistext. Trenne Attribute durch Leerzeichen und setze ihre Werte in gerade Anführungszeichen. Ihre Reihenfolge ändert ihre Bedeutung nicht. Anführungszeichen halten einen Wert zusammen: class="intro note" vergibt zwei Klassennamen, während class=intro note als ein Klassenwert und ein separates Attribut namens note gelesen wird.

Elemente ineinander verschachteln

Ein Absatz kann ein Wort von hoher Wichtigkeit enthalten:

<p>Bring your <strong>booking number</strong>.</p>

Öffne den Absatz, öffne das strong-Element, schließe das strong-Element und schließe dann den Absatz. Schließe das zuletzt geöffnete Element zuerst. Der Absatz ist das Elternelement und das strong-Element sein Kindelement. Kindelemente und alles, was in ihnen enthalten ist, sind Nachfahrenelemente. Der Browser ordnet diese Beziehungen im DOM (Document Object Model), einem Baum des Seiteninhalts.

Nicht jedes Element darf innerhalb jedes anderen Elements stehen. Eine Liste kann zum Beispiel nicht innerhalb eines Absatzes stehen. Einrückung hilft dir, Verschachtelungen zu erkennen, aber Leerzeichen machen eine ungültige Beziehung zwischen Eltern- und Kindelement nicht gültig.

Besondere Arten von Elementen und Attributen erkennen

Leere Elemente haben keinen Inhalt und kein End-Tag. Beispiele sind <img>, <br>, <hr>, <meta> und <link>. Schreibe <br> ohne </br>. Ein abschließender Schrägstrich in <br /> hat in HTML keine Wirkung.

Ein boolesches Attribut ist eingeschaltet, wenn es vorhanden ist. Bei einer geordneten Liste bewirkt reversed, dass die Nummerierung rückwärts zählt. Auch reversed="false" lässt das Attribut vorhanden, sodass weiterhin rückwärts gezählt wird. Entferne das Attribut, um die Funktion auszuschalten.

Einige Attribute funktionieren auf verschiedenen Elementen:

Abstände und Kommentare im Quelltext lesen

In gewöhnlichem Text werden mehrere Leerzeichen, Tabulatoren oder Zeilenumbrüche im Quelltext zu einem Leerzeichen zusammengefasst. Ein Absatz über drei Quelltextzeilen ergibt auf dem Bildschirm weiterhin einen Absatz. Verwende Elemente, um Struktur auszudrücken, und Einrückungen im Quelltext, um ihn lesbar zu machen.

Ein Kommentar sieht so aus: <!-- Menu starts here -->. Er wird auf der Seite nicht angezeigt, ist aber im Quelltext sichtbar. Schreibe niemals Passwörter oder private Informationen in Kommentare. Kommentare können nicht verschachtelt werden: Das erste --> beendet den Kommentar.

Eine vollständige Seite trennt Informationen über das Dokument von den Inhalten, die Menschen lesen. Beginne mit einem kleinen, einheitlichen Grundgerüst und ergänze dann den eigenen Titel und den Dokumentkörper der Seite.

Das Grundgerüst erstellen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Opening Hours – Harbor Café</title>
  </head>
  <body>
    <h1>Harbor Café</h1>
    <p>Open every day except Monday.</p>
  </body>
</html>

<!DOCTYPE html> weist den Browser an, den Standardmodus mit seinen normalen modernen Darstellungsregeln zu verwenden. Es ist eine Deklaration, kein Element. Fehlt sie, kann der Quirks-Modus ausgelöst werden, der älteres Browserverhalten nachahmt und Layout und Größen ändern kann.

<html> ist das Wurzelelement. Seine zwei Kindelemente sind <head> und <body>. Das head-Element enthält Metadaten, also Informationen über die Seite. Das body-Element enthält den sichtbaren Inhalt. Ein <h1> gehört in den Dokumentkörper, auch wenn der Browser den Fehler offenbar behebt, wenn du es in das head-Element setzt.

Der Seite ihre Identität geben

Das <title> erscheint im Browser-Tab, in Lesezeichen und im Verlauf. Suchmaschinen können es auch als Überschrift eines Suchergebnisses verwenden. Gib jeder normalen Seite genau einen Titel innerhalb des head-Elements. Nenne zuerst das konkrete Thema und danach den Namen der Website, etwa „Öffnungszeiten – Hafencafé“. Das sichtbare <h1> und der Dokumenttitel sind getrennte Elemente mit unterschiedlichen Aufgaben.

Setze <meta charset="utf-8"> an die erste Stelle im head-Element. Die gesamte Deklaration muss innerhalb der ersten 1.024 Bytes der Datei stehen. Durch die frühe Deklaration kann der Browser erkennen, wie er Text dekodieren muss, bevor er viel von der Seite gelesen hat.

Die Viewport-Zeile fordert mobile Browser auf, die Gerätebreite für das Layout und einen anfänglichen Zoom von 1 zu verwenden. Ohne sie verwenden viele einen breiten virtuellen Desktop-Viewport und verkleinern das Ergebnis, sodass Text klein erscheint. Diese Zeile bereitet das Dokument für ein mobiles Layout vor; die Gestaltung der Seite bestimmt weiterhin, wie sich ihr Inhalt einfügt.

Weitere Ressourcen der Seite einbinden

Häufige Ergänzungen im head-Element sind:

<meta name="description" content="Fresh bread, coffee and lunch by the harbor.">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>

Die Beschreibung fasst die Seite zusammen und kann in Suchergebnissen erscheinen. Das Symbol liefert das Bild im Tab. Der Stylesheet-Link bindet eine CSS-Datei ein. Das script-Element bindet JavaScript ein; defer verzögert seine Ausführung, bis das Dokument geparst wurde. Anders als <link> und <meta> braucht <script> ein End-Tag, auch wenn sein Inhalt leer ist.

Eine Webseitendatei speichern

Speichere reinen Text in einem Code-Editor mit der Erweiterung .html. Ein Textverarbeitungsprogramm kann Formatierungen hinzufügen, die nicht in eine HTML-Quelldatei gehören. Die Standardseite eines Ordners heißt üblicherweise index.html; die meisten Webserver senden sie, wenn jemand die Ordneradresse anfordert.

Wähle kleingeschriebene Namen mit Bindestrichen, etwa opening-hours.html. Leerzeichen werden in URLs zu %20, und viele Server unterscheiden Groß- und Kleinschreibung. Prüfe, dass der Editor deine Seite nicht als index.html.txt gespeichert hat. Öffne die HTML-Datei nach dem Speichern im Browser und lade sie nach einer Änderung neu.

Die Sprache eines Textes und die Art, wie seine Zeichen gespeichert werden, beantworten unterschiedliche Fragen. Ein Browser braucht beide Angaben, um die Seite richtig darzustellen, insbesondere wenn der Inhalt Akzente oder mehr als ein Schriftsystem enthält.

Die Sprache des Inhalts angeben

Gib die Hauptsprache am Wurzelelement an: <html lang="en">. Screenreader können anhand dieser Information die Aussprache wählen, und Browser können sie für Übersetzung und Rechtschreibung nutzen. Eine Sprachkennzeichnung beginnt mit einem Sprachcode. Ein optionaler zweiter Teil kann eine Region oder Schrift benennen.

Die Kennzeichnung beschreibt den Inhalt, nicht den Standort des Besuchers. uk bedeutet Ukrainisch und ist daher nicht die Kennzeichnung für Englisch im Vereinigten Königreich.

Kennzeichne einen Sprachwechsel am nächstgelegenen geeigneten Element:

<p>Our host said <span lang="fr">bon appétit</span>.</p>

Nur der französische Ausdruck erhält eine französische Aussprache. Bei einem ganzen Zitat kann die Sprache an dessen <blockquote> stehen. Eine Seite mit Schreibrichtung von rechts nach links braucht zusätzlich ihre grundlegende Schreibrichtung, zum Beispiel <html lang="ar" dir="rtl">. Arabische Buchstaben verlaufen auch ohne dieses Attribut von rechts nach links, aber die grundlegende Schreibrichtung beeinflusst die Absatzausrichtung, Satzzeichen und Text mit gemischten Schreibrichtungen.

Gespeicherte Bytes und Deklaration aufeinander abstimmen

Eine Zeichenkodierung ordnet Zeichen gespeicherten Bytes zu. UTF-8 kann alle Unicode-Zeichen darstellen, darunter Buchstaben mit Akzent, andere Schriften und Emojis. HTML-Dokumente verwenden UTF-8.

Es gibt zwei Schritte: Speichere die Datei selbst im Editor als UTF-8 und deklariere <meta charset="utf-8"> früh im head-Element. Die Deklaration sagt dem Browser, wie er Bytes lesen soll; sie wandelt eine Datei, die in einer anderen Kodierung gespeichert wurde, nicht um. Die Kodierungsangabe eines Servers in seinem Content-Type-HTTP-Header hat Vorrang vor dem meta-Element.

Eine abweichende Kodierung hinterlässt oft einen Hinweis. Als Windows-1252 gelesener UTF-8-Text „Café“ kann zu „Café“ werden, weil die zwei Bytes für „é“ getrennt interpretiert werden. Eine als UTF-8 gelesene Windows-1252-Datei kann dagegen „Caf�“ anzeigen, weil das Byte in UTF-8 ungültig ist. Prüfe die Kodierung des Editors und die im Browser empfangenen Dokumentinformationen, bevor du einzelne Buchstaben ersetzt.

Zeichen anzeigen, die HTML für seine Syntax verwendet

Um wörtlichen Text anzuzeigen, der wie ein Tag aussieht, schreibe Zeichenreferenzen:

<p>Use &lt;p&gt; for paragraphs.</p>

Die Seite zeigt „Use

for paragraphs.“ an. Das < muss als < dargestellt werden, damit der Browser kein Tag beginnt. Jede benannte Referenz beginnt mit & und endet mit ;.

Zum Beispiel hält 10 km die Zahl und die Einheit in derselben Zeile. Gewöhnliche Zeichen mit Akzent können direkt in eine UTF-8-Datei eingegeben werden; du brauchst keine eigene Referenz für jeden Akzent.

Ein Browser versucht, eine Seite auch dann anzuzeigen, wenn ihr HTML fehlerhaft ist. Diese hilfreiche Fehlerbehandlung kann Fehler verbergen. Eine Seite zu prüfen bedeutet daher, sowohl den selbst geschriebenen Quelltext als auch die vom Browser aufgebaute Struktur zu untersuchen.

Quelltext mit dem DOM vergleichen

Seitenquelltext anzeigen zeigt das vom Browser empfangene HTML. Der Bereich „Elemente“ oder „Inspektor“ in den Entwicklerwerkzeugen zeigt das DOM, den geparsten Baum, den der Browser verwendet. Der Browser hat beim Parsen möglicherweise ein Element vorzeitig geschlossen oder Inhalt an eine andere Stelle verschoben.

Öffne den Inspektor per Rechtsklick auf die Seite und wähle „Untersuchen“ oder verwende die Tastenkombination für die Entwicklerwerkzeuge deines Browsers. Wähle ein angezeigtes Element aus und sieh dir sein Eltern- und seine Kindelemente an. Suche dann denselben Bereich im Quelltext. Unterschiede können unerwartete Abstände, zu weit reichende Links oder auf die falschen Elemente angewendete Stile erklären.

Eine automatische Reparatur nachvollziehen

Angenommen, du schreibst:

<p>Our soups:
  <ul>
    <li>Tomato</li>
    <li>Lentil</li>
  </ul>
</p>

Ein Absatz akzeptiert Inhalte auf Textebene, keine Liste. Bei <ul> schließt der Browser den Absatz. Die Liste wird zu einem eigenen Block. Das abschließende </p> hat keinen offenen Absatz mehr zu schließen, sodass beim Parsen ein zusätzlicher leerer Absatz entstehen kann.

Die gewünschte Korrektur gehört in den Quelltext:

<p>Our soups:</p>
<ul>
  <li>Tomato</li>
  <li>Lentil</li>
</ul>

Verschiebe das End-Tag des Absatzes vor die Liste. Das DOM kann nun die beabsichtigte Beziehung ohne Fehlerbehandlung ausdrücken.

Ein HTML-Prüfprogramm verwenden

Der W3C Nu Html Checker nimmt eine Seitenadresse, eine hochgeladene Datei oder eingefügtes HTML entgegen. Er meldet Fehler und Warnungen mit Positionsangaben. Beginne mit dem ersten Fehler, behebe ihn und führe die Prüfung erneut aus. Ein einziges fehlendes Anführungszeichen kann viele spätere Meldungen verursachen; jede gemeldete Zeile sofort zu bearbeiten, kann daher unnötige Arbeit sein.

Zum Beispiel fehlt in <a href="about.html> das schließende Anführungszeichen. Der Browser kann folgenden HTML-Quelltext als Teil des Attributwerts behandeln. Wird das Anführungszeichen ergänzt, können mehrere spätere Fehler verschwinden. Ebenso kann ein fehlendes </a> dazu führen, dass nicht zugehöriger Text Teil des Links wird.

Achte besonders auf:

• Elemente, die in der falschen Reihenfolge geschlossen werden, oder falsch geschriebene Namen wie <pargraph>.
• Dieselbe id, die zweimal auf einer Seite verwendet wird.
• Ein <li> außerhalb seiner Liste.
• Ein Bild ohne alt-Attribut.
• Sichtbaren Inhalt im head-Element.

Bedeutung und Syntax prüfen

Ein fehlerfreies Prüfergebnis sagt dir, dass der geprüfte HTML-Quelltext den Regeln des Prüfprogramms folgt. Es kann nicht entscheiden, ob „Hier klicken“ ein hilfreicher Linktext ist oder ob der Alternativtext eines Bildes die richtigen Informationen liefert. Lies die Seite der Reihe nach und prüfe diese Entscheidungen selbst.

Prüfe vor dem Abschluss einer Seite die Dokumenttypdeklaration, die Dokumentsprache, die frühe UTF-8-Deklaration und einen aussagekräftigen Titel. Überprüfe Überschriftenebenen, eindeutige IDs, Bildalternativen und Linkziele. Öffne die Seite in mindestens zwei Browsern und folge ihren Links. Ein gültiger relativer Pfad kann dennoch auf eine fehlende Datei verweisen, was eine reine Syntaxprüfung nicht entdeckt.

Überschriften geben Lesern eine Übersicht über die Seite. Absätze enthalten innerhalb dieser Übersicht zusammengehörige Sätze. Wähle ihre Elemente anhand der Struktur des Inhalts und überlasse das Aussehen CSS.

Eine Überschriftengliederung erstellen

HTML hat sechs Überschriftenebenen, <h1> bis <h6>. Verwende ein <h1> für das Hauptthema der Seite, <h2> für ihre Hauptabschnitte und <h3> für Teile innerhalb eines <h2>-Abschnitts. Die meisten Seiten brauchen nur wenige Ebenen.

<h1>Growing Basil at Home</h1>
<p>Basil grows well on a sunny windowsill.</p>
<h2>Planting</h2>
<p>Sow the seeds 0.5 cm deep in moist soil.</p>
<h2>Care</h2>
<h3>Watering</h3>
<p>Water when the top of the soil feels dry.</p>
<h3>Harvesting</h3>
<p>Pick the top leaves first.</p>

Lies nur die Überschriften. „Planting“ und „Care“ sind gleichrangige Hauptabschnitte. „Watering“ und „Harvesting“ gehören unter „Care“. Diese Gliederung bleibt hilfreich, wenn ein Screenreader die Überschriften auflistet oder ein Leser die Seite schnell überfliegt.

Eine Überschrift darf gegenüber der vorherigen Überschrift nur um eine Ebene tiefer liegen: Verwende nach <h1> ein <h2>, kein <h3>. Beim Zurückgehen nach oben dürfen mehrere Ebenen übersprungen werden. Ein <h2> nach einem <h4> beginnt einen neuen Hauptabschnitt. Die Überschriftenebenen folgen dem gesamten Dokument, einschließlich der Inhalte innerhalb von Abschnitten und Artikeln.

Der HTML-Standard erlaubt mehrere Überschriften der obersten Ebene, aber ein einziges Haupt-<h1> ist das übliche, übersichtliche Muster. Wähle <h4> nicht nur, weil sein Text standardmäßig kleiner ist. Ein fett gedruckter Absatz kann wie eine Überschrift aussehen, erscheint aber nicht in der Überschriftenliste eines Screenreaders.

Einen Untertitel von einem Abschnitt unterscheiden

Ein Slogan beschreibt die zugehörige Überschrift; er leitet keinen neuen Abschnitt ein. Fasse Überschrift und Untertitel in <hgroup> zusammen:

<hgroup>
  <h1>Harbor Café</h1>
  <p>Fresh bread every morning</p>
</hgroup>

Der Absatz bleibt ein Untertitel. Würde er zu <h2>, stünde er fälschlich als Hauptabschnitt in der Seitengliederung.

Absätze für zusammengehörige Sätze verwenden

Ein <p>-Element enthält einen Absatz. Beginne einen neuen Absatz, wenn sich das Thema oder der Schritt der Erklärung ändert. Browser fügen standardmäßig sichtbaren Abstand um Absätze hinzu.

Ein Druck auf die Eingabetaste in gewöhnlichem HTML-Quelltext erzeugt keinen neuen angezeigten Absatz. Ebenso sind leere <p>-Elemente kein Mittel für Abstände. Halte die Struktur sinnvoll und lege zusätzlichen Abstand mit CSS fest.

Einen Umbruch nach seiner Bedeutung wählen

Bei einer Adresse hält <p>Harbor Café<br>12 Quay Street<br>Port Town</p> die Zeilen als einen Absatz zusammen. Wiederholte <br>-Elemente zwischen gewöhnlichen Absätzen vermischen Inhaltsstruktur und Abstände. Eine von <hr> gezeichnete waagerechte Linie drückt einen Themenwechsel aus; wähle sie wegen dieser Bedeutung und nicht nur zur Dekoration der Seite.

Textelemente teilen dem Browser mit, was ein Wort oder eine Passage bedeutet. Ihr standardmäßig fettes, kursives oder eingerücktes Aussehen ist nur ein Ausgangsstil. Wähle zuerst die Bedeutung.

Betonung, Wichtigkeit und Aufmerksamkeit unterscheiden

Wird die Betonung in „Ich habe die Tür doch abgeschlossen“ verschoben, ändert sich, was der Sprecher richtigstellt. Hohe Wichtigkeit hat eine andere Aufgabe: Eine Warnung ist wichtig, unabhängig davon, wie der Satz gesprochen wird. Verwende CSS, wenn du nur eine visuelle Gestaltung möchtest.

Zitate und ihre Quellen auszeichnen

Ein langes Zitat verwendet <blockquote>. Sein optionales cite-Attribut gibt eine Quell-URL an, aber diese Adresse wird nicht automatisch angezeigt. Setze eine sichtbare Quellenangabe außerhalb des Zitats:

<blockquote cite="https://example.com/interview">
  <p>The garden is open to everyone.</p>
</blockquote>
<p>From <cite>A Conversation About the Garden</cite>.</p>

<cite> kennzeichnet den Titel eines Werks, nicht den Namen einer Person. Ein kurzes Zitat innerhalb eines Satzes verwendet <q>, und der Browser ergänzt die Anführungszeichen. Gib nicht noch ein zweites Paar um dieselben Wörter ein.

Eine Abkürzung kann <abbr title="World Health Organization">WHO</abbr> verwenden. Schreibe ihre ausgeschriebene Form beim ersten Auftreten auch sichtbar hin. Ein Tooltip allein ist auf Touchscreens schwer zugänglich und erklärt nicht jedem Leser zuverlässig die Bedeutung.

Code anzeigen und seine Abstände erhalten

<code> kennzeichnet ein kurzes Stück Code innerhalb eines Satzes. Kombiniere es für einen Block, bei dem Leerzeichen und Zeilenumbrüche wichtig sind, mit <pre>:

<pre><code>&lt;p&gt;Welcome.&lt;/p&gt;</code></pre>

Der Leser sieht den wörtlichen HTML-Quelltext des Absatzes. <pre> erhält die Formatierung, schaltet aber das Parsen von HTML nicht aus. Du musst < weiterhin als < und ein kaufmännisches Und als & darstellen, wenn sie als Text erscheinen sollen. Andernfalls kann ein Codebeispiel als tatsächlicher HTML-Quelltext der Seite interpretiert werden.

Datum, Schreibweisen und weitere nützliche Bedeutungen kennzeichnen

<sub> und <sup> drücken Tief- und Hochstellung aus, wo die Schreibweise sie braucht: H<sub>2</sub>O und m<sup>2</sup>. Sie dienen nicht dazu, anderen Text kleiner zu machen.

<time> verbindet lesbaren Datums- oder Uhrzeittext mit einem maschinenlesbaren Wert:

<time datetime="2026-03-14">March 14, 2026</time>

Der datetime-Wert verwendet Jahr-Monat-Tag. Eine Uhrzeit kann den 24-Stunden-Wert 14:30 verwenden, auch wenn der sichtbare Text „2:30 p.m.“ lautet.

Verwende <mark> für Text, der hervorgehoben wird, weil er im aktuellen Kontext relevant ist, etwa einen Suchtreffer. <small> enthält Nebenbemerkungen oder Kleingedrucktes. Ein <span> hat keine eingebaute Bedeutung; es ist innerhalb einer Zeile für ein Sprachattribut oder als Ansatzpunkt für die Gestaltung nützlich.

Eine echte Liste gibt zusammengehörigen Einträgen eine gemeinsame Struktur. Durch ihre Auszeichnung hören Leser, dass eine Liste beginnt und wie viele Einträge sie enthält. Die Listenart hängt von der Bedeutung der Einträge ab.

Den Listentyp wählen

Verwende <ul> für Einträge, deren Reihenfolge ihre Bedeutung nicht verändert, etwa Zutaten. Verwende <ol> für eine Abfolge oder Rangliste, bei der die Reihenfolge wichtig ist. Beide enthalten Listeneinträge, die mit <li> gekennzeichnet werden.

<ol>
  <li>Boil the water.</li>
  <li>Add the pasta.</li>
  <li>Cook for 10 minutes.</li>
</ol>

Eine Umkehrung dieser Schritte würde die Anleitung verändern, daher passt eine geordnete Liste. Ein Browser zeigt für <ol> normalerweise Zahlen und für <ul> Aufzählungszeichen an. CSS kann diese Zeichen ändern; die Bedeutung der Liste bleibt gleich.

Ahme eine Liste nicht mit eingegebenen Bindestrichen und Zeilenumbrüchen nach. Diese Zeichen können ähnlich aussehen, teilen einem Screenreader aber nicht mit, dass die Einträge eine Liste bilden. Ein Navigationsmenü verwendet oft eine ungeordnete Liste, während eine Brotkrümelnavigation eine geordnete Liste verwendet, weil ihr Pfad eine Reihenfolge hat.

Eine Liste innerhalb ihres Eintrags verschachteln

Bei gewöhnlichem Listeninhalt sind die direkten Kindelemente von <ul> und <ol> <li>-Elemente. Setze keinen Absatz und keine weitere Liste direkt dazwischen. Der Standard erlaubt auch skriptunterstützende Elemente, aber diese ersetzen keine Listeneinträge.

Eine verschachtelte Liste gehört in den Eintrag, den sie beschreibt:

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Öffne zuerst den Eintrag „Fruit“. Füge seine verschachtelte Liste hinzu, schließe diese Liste und dann den Eintrag „Fruit“. Nun sind „Apples“ und „Pears“ strukturell mit „Fruit“ verbunden. Stünde das innere <ul> nach dem </li> des Elternelements, ginge diese Beziehung verloren. Ein <li> kann auch Absätze, Links und Bilder enthalten.

Aussagekräftige Nummerierung steuern

Eine geordnete Liste kann eine Zählung fortsetzen oder umkehren:

reversed ist boolesch. Es bleibt in reversed="false" aktiviert; entferne es, um wieder aufwärts zu zählen. Bei type wählen die Werte 1, a, A, i und I gängige Nummerierungsformen. Verwende eine aussagekräftige Form des Listenzeichens, wenn sich Text an anderer Stelle auf eine bestimmte Kennzeichnung bezieht, etwa Klausel „b“.

Begriffe und Beschreibungen zuordnen

Eine Beschreibungsliste verwendet <dl>, mit <dt> für einen Begriff oder Namen und <dd> für dessen Beschreibung oder Wert:

<dl>
  <dt>Opening time</dt>
  <dd>08:30</dd>
  <dt>Closing time</dt>
  <dd>17:00</dd>
</dl>

Ein Begriff kann mehrere Beschreibungen haben, und mehrere Begriffe können sich eine Beschreibung teilen. Eine Gruppe kann von einem <div> umschlossen werden. Verwende diese Struktur für Name-Wert-Beziehungen wie ein Glossar oder Produktdetails, statt solche Paare in unpassende Aufzählungspunkte zu zwängen.

Ein Link verbindet Inhalt mit einem Ziel. Der Browser ermittelt dieses Ziel aus der Adresse, die du in href angibst. Daher gehört die Wahl der richtigen URL-Art zum Schreiben des Links.

Ein a-Element schreiben

<a href="https://www.w3.org/">World Wide Web Consortium</a>

Das <a>-Element ist ein Anker. Sein href ist das Ziel und sein Inhalt der anklickbare Linktext. Ein Anker ohne href ist ein Platzhalter und kein funktionierender Hyperlink. Auch ein Bild kann sein Inhalt sein.

Eine absolute URL enthält ein URL-Schema und eine Domain, wie in https://example.com/guide/. Verwende sie für Links zu einer anderen Website. href="www.example.com" fehlt ein URL-Schema, daher behandelt der Browser die Angabe als relativen Dateipfad; sie bedeutet nicht „Diese Website öffnen“.

Vom aktuellen Ordner ausgehen

Eine relative URL geht vom Speicherort der aktuellen Seite aus. Betrachte diese Website:

site/
  index.html
  about.html
  recipes/
    index.html
    soup.html
  images/
    logo.png

Von der Startseite aus erreicht about.html die benachbarte Infoseite, und recipes/soup.html führt in den Rezeptordner. Von recipes/soup.html aus würde dasselbe about.html im Ordner recipes/ suchen, wo es keine solche Datei gibt.

Verfolge den Pfad von recipes/soup.html zum Logo:

1. Der Ausgangsordner ist recipes/.
2. ../ führt eine Ebene nach oben zum Website-Ordner.
3. images/ führt in den Bildordner.
4. logo.png bezeichnet die Datei.

Der fertige Pfad lautet ../images/logo.png. Jedes weitere ../ führt eine weitere Ordnerebene nach oben. Dagegen erreicht index.html von der Suppenseite aus die Rezeptübersicht, nicht die Startseite der Website.

Eine wurzelrelative URL beginnt mit /, zum Beispiel /about.html. Auf einem Webserver beginnt sie im Wurzelverzeichnis der Website, unabhängig vom Ordner der aktuellen Seite. Beim direkten Öffnen vom Laufwerk bezieht sich dieser Schrägstrich auf das Wurzelverzeichnis des Dateisystems und bezeichnet daher nicht den Website-Ordner deines Projekts. Verwende gewöhnliche relative Pfade für Seiten, die du auch direkt vom Laufwerk testest.

Pfade verwenden Schrägstriche und müssen mit Dateinamen und deren Groß- und Kleinschreibung übereinstimmen. Viele Server behandeln Soup.html und soup.html als unterschiedliche Dateien. Ein Ordnerlink wie recipes/ fordert normalerweise die Standarddatei des Ordners vom Server an, meist index.html; beim direkten Öffnen vom Laufwerk kann eine Ordnerübersicht erscheinen.

Zu einem Teil einer Seite springen

<a href="#watering">Watering</a>
<h2 id="watering">Watering</h2>

Das Fragment beginnt in der URL mit #. Die id des Ziels hat kein # und muss genau übereinstimmen. Für eine andere Seite kombinierst du beides: basil.html#watering. Ein leeres Fragment # führt zum Seitenanfang. Auch #top führt zum Seitenanfang, wenn kein passendes Element gefunden wird.

Ein E-Mail- oder Telefonziel öffnen

mailto:info@example.com fordert die E-Mail-App des Besuchers auf, eine Nachricht zu erstellen. Ein Betreff kann als mailto:info@example.com?subject=Table%20booking angegeben werden, wobei das Leerzeichen als %20 kodiert wird. tel:+15555550123 gibt ein Telefonziel im internationalen Format an. Die sichtbare Telefonnummer darf Leerzeichen enthalten, obwohl dieses href keine enthält.

Ein nützlicher Link sagt einer Person, was sie erwartet, bevor sie ihm folgt. Text, Ziel und Öffnungsverhalten wirken zusammen, auch wenn der Link in der Linkliste eines Screenreaders für sich allein gelesen wird.

Das Ziel benennen

Vergleiche diese Links:

Halte Linktexte kurz, aber aussagekräftig. Wenn zwei Links denselben Text haben, lass sie zum selben Ziel führen. Eine bloße URL ist meist schwerer zu lesen als eine Beschreibung, obwohl eine E-Mail-Adresse ein hilfreicher Linktext ist, wenn die Adresse selbst die Information ist.

Ein title-Tooltip kann eine unklare sichtbare Formulierung nicht beheben. Touchscreen-Nutzer sehen den Tooltip möglicherweise nie, und der Tastaturzugriff darauf ist nicht zuverlässig. Setze die wichtigen Informationen zum Ziel in den eigentlichen Inhalt des Links.

Dateien und Downloads ankündigen

<a href="menu.pdf" download="harbor-cafe-menu.pdf">Lunch menu (PDF, 2 MB)</a>

Der Text nennt Dateityp und Dateigröße. Das download-Attribut fordert den Browser auf, die Datei zu speichern, und schlägt einen Dateinamen vor. Es wandelt eine Seite nicht in ein PDF um. Bei gewöhnlichen Links auf Webdateien muss das Ziel denselben Ursprung haben, damit download gilt; spezielle blob:- und data:-URLs werden ebenfalls unterstützt. Browsereinstellungen und Server-HTTP-Header können das endgültige Verhalten beeinflussen. Das Attribut ist daher eine Aufforderung und verspricht keinen bestimmten Dialog.

Nutzern die Kontrolle über neue Tabs lassen

Gewöhnliche Links öffnen sich im aktuellen Browserkontext, wo die Zurück-Schaltfläche zur vorherigen Seite zurückführen kann. target="_blank" fordert einen neuen Tab oder ein neues Fenster an. Der neue Tab hat nicht den Zurück-Verlauf des ursprünglichen Tabs, und ein Besucher bemerkt den Wechsel möglicherweise nicht.

Verwende einen neuen Tab nur, wenn er einem klaren Zweck dient, und kündige ihn im Text an:

<a href="https://example.com/archive" target="_blank" rel="noopener">Archive (opens in a new tab)</a>

Moderne Browser geben _blank-Links den Schutz von noopener: Die geöffnete Seite kann window.opener nicht verwenden, um die ursprüngliche Seite zu steuern. Ein ausdrücklich gesetztes rel="noopener" deckt auch älteres Verhalten ab. noreferrer unterdrückt zusätzlich Referrer-Informationen. nofollow vermittelt eine Beziehung für Suchmaschinen, kein Navigationsziel.

Bildlinks und größere Links verständlich machen

Wenn ein Bild der einzige Linkinhalt ist, liefert sein Alternativtext den Namen des Links:

<a href="index.html">
  <img src="logo.png" alt="Harbor Café home page">
</a>

Die hilfreiche Information ist, wohin der Link führt. Nur die Farben des Logos zu beschreiben, würde sein Ziel nicht nennen.

Ein Anker kann eine größere Karte mit einer Überschrift und einem Absatz umschließen, darf aber keinen weiteren Link und keine Schaltfläche enthalten. Verschachtelte interaktive Steuerelemente bieten konkurrierende Ziele oder Aktionen innerhalb eines Steuerelements.

Ein Link führt an ein Ziel: eine Seite, eine Datei oder einen Seitenabschnitt. Eine Schaltfläche führt eine Aktion aus, etwa das Öffnen eines Menüs. href="#" ist ein Link zum Seitenanfang; er ersetzt keine Schaltfläche, die eine Aktion ausführt.

Navigation hilft Menschen, sowohl die gewünschte Seite einer Website als auch den benötigten Teil einer langen Seite zu finden. HTML kann diese Gruppen kennzeichnen, damit Menschen mit assistiven Technologien sie direkt finden können.

Größeren Navigationsgruppen einen Bereich geben

Verwende <nav> um eine größere Gruppe von Navigationslinks. Ein Website-Menü enthält gewöhnlich eine ungeordnete Liste:

<nav aria-label="Main">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html" aria-current="page">Menu</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Dieser HTML-Quelltext gehört auf die Speisekartenseite: aria-current="page" kennzeichnet den Link zur aktuell angezeigten Seite. Verschiebe das Attribut auf der Kontaktseite zum Kontaktlink. Markiere die Übersichtsseite eines Bereichs nicht als aktuelle Seite, wenn der Leser eine andere Seite innerhalb dieses Bereichs betrachtet.

Die Liste macht die Anzahl und Gruppierung der Links für Screenreader verfügbar. Ohne CSS stehen die Menüeinträge untereinander. Das <nav>-Element ordnet sie nicht automatisch in einer Reihe an. Einige nicht zusammengehörige Links im Fußbereich brauchen normalerweise keinen eigenen Navigationsbereich.

Menüs auf allen Seiten einheitlich halten

Verwende auf der gesamten Website dieselben Einträge in derselben Reihenfolge und an derselben Stelle. Wenn du bei einer statischen HTML-Website das Menü kopierst, musst du jede Kopie aktualisieren, sobald sich sein Inhalt ändert.

Prüfe die Ziele vom tatsächlichen Ordner jeder Seite aus. Von recipes/soup.html aus lautet der Link zur Startseite ../index.html; index.html würde die Rezeptübersicht erreichen. Der Text im Menü kann gleich bleiben, während sich die relativen Pfade ändern. Eine Website auf einem Server kann wurzelrelative Pfade verwenden, um diese Abhängigkeit vom Ordner zu vermeiden.

Ein Inhaltsverzeichnis erstellen

Ein Inhaltsverzeichnis verlinkt Überschriften auf der aktuellen Seite:

<nav aria-label="Contents">
  <ol>
    <li><a href="#planting">Planting</a></li>
    <li><a href="#care">Care</a></li>
  </ol>
</nav>
<h2 id="planting">Planting</h2>

Jedes Fragment muss einer eindeutigen ID entsprechen. Füge für den zweiten Link eine entsprechende Überschrift mit id="care" hinzu. Haben mehrere Navigationsbereiche unterschiedliche Aufgaben, können Screenreader-Nutzer sie anhand von Beschriftungen wie „Main“ und „Contents“ unterscheiden.

Eine Brotkrümelnavigation ist eine weitere Art der Navigation. Sie zeigt einen Pfad wie „Startseite › Rezepte › Tomatensuppe“. Verwende <nav aria-label="Breadcrumb"> mit einer geordneten Liste und platziere die aktuelle Seite zuletzt. Die Reihenfolge zeigt den Weg durch die Website.

Eine Abkürzung an wiederholten Inhalten vorbei anbieten

Setze einen Sprunglink an die erste Stelle im Dokumentkörper:

<a href="#main-content">Skip to main content</a>

Sein Ziel ist der Hauptbereich, geschrieben als <main id="main-content">. Tastaturnutzer können diesem Link folgen, um ein wiederholtes Menü zu überspringen. Halte die Ziel-ID eindeutig und schreibe sie genau wie im Fragment. Ein Sprunglink ist eine funktionierende Navigationshilfe, auch bevor CSS seine Darstellung ändert.

Ein Bild in HTML bleibt eine eigene Ressource. Die Seite teilt dem Browser mit, welche Datei er abrufen soll, wie viel Platz er reservieren soll und welcher Text das Bild ersetzen kann.

Ein Bild hinzufügen

<img src="images/harbor.jpg" alt="Fishing boats moored in the harbor at sunset" width="1200" height="800">

<img> ist leer und hat daher kein End-Tag. src gibt eine Dateiadresse an, für die dieselben Pfadregeln wie für Links gelten. alt liefert eine Textalternative. Wird das Bild nicht angezeigt, prüfe den Ordner, die Groß- und Kleinschreibung und die Dateinamenerweiterung in src. Ein .jpg-Pfad bezeichnet keine .png-Datei, und .JPG kann sich auf einem Server von .jpg unterscheiden.

Die Bytes des Bildes werden nicht innerhalb dieses HTML-Elements gespeichert. Der Browser lädt die Datei separat herunter. Eine Änderung der HTML-Breite verkleinert die heruntergeladene Datei nicht.

Ein zum Inhalt passendes Format wählen

Aktuelle große Browser unterstützen WebP und AVIF. Wähle ein Bild anhand des Inhalts und der entstehenden Dateigröße, nicht nur seiner Erweiterung. Verlustbehaftete Kompression verwirft einige Details, um Platz zu sparen; verlustfreie Kompression erhält die ursprünglichen Bilddaten.

Die richtigen Proportionen reservieren

Die Attribute width und height sind ganze Zahlen in CSS-Pixeln, ohne Einheit im Wert. Schreibe width="1200", nicht width="1200px". Sie ermöglichen dem Browser, Platz zu reservieren, bevor die Datei eintrifft. Das verringert Layoutverschiebungen, bei denen Text beim Laden eines Bildes springt.

Ein Bild mit 1.200 × 800 Pixeln hat ein Seitenverhältnis von 3:2. Sowohl width="1200" height="800" als auch width="600" height="400" erhalten es. Das zweite Wertepaar halbiert beide Maße. Ein Wertepaar von 600 × 600 erzwingt ein Quadrat und verzerrt das Bild. CSS kann später die angezeigten Maße steuern und dabei das Seitenverhältnis erhalten.

Die Datei vor der Verwendung verkleinern

Ein Handyfoto mit 4.000 × 3.000 Pixeln hat 12 Millionen Pixel und kann mehrere Megabyte belegen. Skaliere es auf ungefähr seine größte vorgesehene Anzeigegröße und wähle eine sinnvolle Kompression, bevor du es zur Website hinzufügst. Andernfalls lädt jeder Leser die große Datei herunter, selbst wenn die Seite nur ein winziges Vorschaubild zeigt.

Bei Bildern weiter unten auf einer langen Seite erlaubt loading="lazy" dem Browser zu warten, bis der Besucher in ihre Nähe gelangt. Lade ein sofort sichtbares Banner oder Hauptbild normal, da eine Verzögerung die erste Ansicht der Seite verlangsamen kann.

Verwende Bilder, die dir gehören, für deren Nutzung du eine Erlaubnis hast oder die du gemäß ihrer Lizenz weiterverwenden darfst, und gib gegebenenfalls die verlangte Quellenangabe an. Bewahre Bilder der Website in deinem eigenen Website-Ordner auf, damit Dateiänderungen auf einer anderen Website sie nicht unbrauchbar machen. Inhaltsbilder gehören in HTML; rein dekorative Hintergrundtexturen werden gewöhnlich mit CSS umgesetzt.

Alternativtext liefert die Information, die eine Person braucht, wenn sie ein Bild nicht sehen kann. Eine Abbildungsbeschriftung liefert für alle sichtbaren Kontext. Die Wahl beider beginnt mit dem Zweck des Bildes auf dieser konkreten Seite.

Die nützliche Information beschreiben

Beschreibe bei einem Foto, das Lesern hilft, einen Ort zu verstehen, was wichtig ist: alt="The café's terrace with six tables overlooking the harbor". Eine lange Aufzählung jedes einzelnen Gegenstands ist selten hilfreich. Du brauchst normalerweise kein „Bild von“, weil Screenreader die Bildrolle bereits ansagen. Das Medium kann jedoch wichtig sein, wie in „Aquarell des Hafens“.

Der Kontext verändert, welche Alternative hilfreich ist. Auf einer Vermittlungsseite könnten die wichtigen Details einen Hund beschreiben. Auf der Besucherseite eines Parks könnte dasselbe Foto vermitteln, dass Hunde auf der Wiese willkommen sind. Frag dich, welche Information einem Leser fehlen würde, wenn das Bild verschwände.

Gib bei einem Diagramm seine Kernaussage an und platziere ausführliche Daten in der Nähe. Alternativtext kann zum Beispiel angeben, dass die Websitebesuche von 1.200 im Januar auf 3.000 im März stiegen. Der umgebende Text kann die vollständigen Zahlen nennen. Ein fotografiertes Schild oder eine andere Schriftgrafik braucht die relevanten Wörter in seiner Textalternative.

Informative, dekorative und funktionale Bilder unterscheiden

Ein leerer alt-Wert ist eine bewusste Anweisung, ein dekoratives Bild zu überspringen. Das Attribut wegzulassen ist etwas anderes: Manche Screenreader sagen dann möglicherweise stattdessen den Dateinamen an. Verwende ein alt-Attribut bei jedem Bild, das du einfügst.

Ein Logo, das den einzigen Inhalt eines Links zur Startseite bildet, braucht einen hilfreichen Linknamen, etwa „Startseite des Hafencafés“. Der Leser muss das Ziel kennen und nicht nur wissen, dass das Logo blaue Wellen enthält. title ist kein Ersatz: Sein Tooltip ist für Tastatur-, Touchscreen- oder Screenreader-Nutzer nicht zuverlässig verfügbar.

Eine Abbildungsbeschriftung mit figure hinzufügen

<figure>
  <img src="images/old-harbor.jpg" alt="Sailing ships crowded along a stone quay" width="1000" height="667">
  <figcaption>The harbor around 1900. Photo: Port Town Archive.</figcaption>
</figure>

<figure> gruppiert eigenständigen Inhalt und seine optionale sichtbare Abbildungsbeschriftung. <figcaption> ist das erste oder letzte Kindelement des figure-Elements, mit höchstens einer Abbildungsbeschriftung pro figure-Element. Ein figure-Element kann mehrere Bilder, ein Codebeispiel, ein Zitat oder ein Diagramm enthalten; es ist nicht auf Fotos beschränkt.

In diesem Beispiel ersetzt der Alternativtext das, was das Foto zeigt. Die Abbildungsbeschriftung liefert das Datum und die Quellenangabe. Würdest du die gesamte Abbildungsbeschriftung in den Alternativtext kopieren, würde ein Screenreader diesen Text wiederholen, ohne das Bild zu erklären. Auch eine Abbildungsbeschriftung, die nur „Abbildung 1“ sagt, ersetzt keine Bildbeschreibung.

Eine Seite enthält Bereiche mit unterschiedlichen Aufgaben: eine Einleitung, Navigation, ihren eigenen Inhalt und ergänzende Informationen. Semantische Elemente benennen diese Aufgaben, sodass die Struktur über ihr sichtbares Layout hinaus nützlich ist.

Jeden Bereich benennen

Ein Kopfbereich der Website enthält oft ein Logo und ein Menü. Ein Kopfbereich eines Artikels kann dagegen seine Überschrift, seinen Autor und das Datum enthalten. Ein Fußbereich kann Kontaktdaten, verwandte Links oder einen Urheberrechtshinweis enthalten. Diese Elemente kennzeichnen Aufgaben, keine feste Auswahl an Wörtern.

Den Hauptinhalt abgrenzen

Eine normale Seite verwendet einen sichtbaren <main>. Sein Inhalt steht nur auf dieser Seite, daher gehört die wiederholte Website-Navigation nach außen. Setze main nicht innerhalb von article, section, aside, header, footer oder nav. Ein Rezeptartikel kann innerhalb von main stehen, nicht umgekehrt.

Ein aside-Element ist für ergänzendes Material gedacht, das nur indirekt mit dem Inhalt zusammenhängt. Eine Sammlung verwandter Rezeptlinks kann ein aside-Element sein; ein wesentlicher Schritt im Rezept kann es nicht sein. Der Name „aside“ platziert den Inhalt nicht in einer Seitenspalte. Ohne CSS stehen diese Bereiche normalerweise in Quelltextreihenfolge untereinander.

<body>
  <header>
    <p>Harbor Café</p>
    <nav>...</nav>
  </header>
  <main>
    <h1>Our Menu</h1>
    <p>Everything is baked fresh each morning.</p>
  </main>
  <aside>
    <h2>Today's special</h2>
    <p>Tomato soup with fresh bread.</p>
  </aside>
  <footer>
    <p>&copy; 2026 Harbor Café</p>
  </footer>
</body>

Der nur auf der Speisekartenseite stehende Inhalt befindet sich in main. Die umgebenden Informationen der Website bleiben außerhalb. Der Quelltext ist von oben nach unten sinnvoll lesbar, bevor Spalten, Farben oder Positionierung hinzukommen.

Orientierungspunkte verstehen

Ein Orientierungspunkt ist ein Bereich, den assistive Technologien als Navigationsziel bereitstellen können. Main und nav stellen Orientierungspunkte bereit. Ein header-Element auf Seitenebene stellt den Banner-Orientierungspunkt bereit, ein footer-Element auf Seitenebene den Orientierungspunkt für Inhaltsinformationen. Ein header- oder footer-Element, das innerhalb von article, aside, main, nav oder section verschachtelt ist, stellt diese Orientierungspunkte auf Seitenebene nicht bereit.

Ein aside-Element hat normalerweise eine ergänzende Rolle. Ein verschachteltes aside-Element kann diese Rolle weiterhin haben; allein die Verschachtelung in einem Artikel entfernt die Bedeutung nicht. Verwende es nur für passenden ergänzenden Inhalt und halte die Bereiche der Seite verständlich.

<search> kennzeichnet einen Bereich mit Such- oder Filtersteuerelementen und Ergebnissen. Es erzeugt einen Orientierungspunkt für die Suche und wird von aktuellen großen Browsern unterstützt. Es unterscheidet sich von nav: Inhalte zu suchen und einen bekannten Navigationslink zu wählen sind unterschiedliche Aufgaben.

Ein header-Element darf kein header- oder footer-Element enthalten, und ein footer-Element darf keines von beiden enthalten. Trenne Bereiche auf Seitenebene von den Kopf- und Fußbereichen, die zu einzelnen Artikeln gehören. Die Wahl der richtigen Namen schafft eine nützliche Struktur, auch wenn alle Bereiche derzeit wie gewöhnliche Blöcke aussehen.

Die semantische Wahl sagt Lesern, was ein Inhaltsblock ist. Frag dich vor der Wahl eines Containers, wie der Inhalt zur Seite gehört; zwei gleich aussehende Boxen können unterschiedliche Elemente brauchen.

Prüfen, ob der Inhalt für sich allein steht

Ein Artikel ist ein eigenständiger Beitrag, der separat geteilt oder weiterverwendet werden könnte. Ein Blogbeitrag, ein Rezept, eine Nachricht oder ein Leserkommentar kann diesen Test bestehen. Ein Artikel hat normalerweise eine eigene Überschrift, aber eine Überschrift allein macht einen Block nicht zu einem Artikel.

Ein Abschnitt gruppiert ein Thema innerhalb eines größeren Ganzen, normalerweise mit einer Überschrift. „Öffnungszeiten“ und „Anfahrt“ können Abschnitte einer Kontaktseite sein. Hat der Block kein klares Thema und kannst du ihm keine sinnvolle Überschrift geben, ist section wahrscheinlich die falsche Wahl.

<article>
  <h2>Growing Basil at Home</h2>
  <section>
    <h3>Planting</h3>
    <p>Choose a sunny place for the pot.</p>
  </section>
  <section>
    <h3>Care</h3>
    <p>Check the soil regularly.</p>
  </section>
</article>

Hier ist der Artikel eine vollständige Anbauanleitung, während seine Abschnitte die Anleitung in Themen aufteilen. Dieses Beispiel passt zu einer Seite, deren Haupt-<h1> vor dem Artikel steht.

Die Verschachtelung funktioniert auch in die andere Richtung. Ein Abschnitt „Aktuelle Nachrichten“ kann mehrere eigenständige Artikel enthalten. Kommentare können Artikel sein, die in dem Artikel verschachtelt sind, auf den sie antworten. Die Beziehung der Inhalte bestimmt die Verschachtelung.

Überschriftenebenen in der Seitengliederung beibehalten

Ein Abschnitt beginnt die Überschriftenebenen nicht erneut. Wenn eine Seite <h1> für ihr Thema und <h2> für eine thematische Gruppe verwendet, verwende <h3> für Artikel innerhalb dieser Gruppe. Setze kein neues <h1> in jeden verschachtelten Abschnitt. Browser und Screenreader verwenden die Überschriftenebenen, die du tatsächlich schreibst; ein umschließendes section-Element behebt keine übersprungene Ebene.

Neutrale umschließende Elemente verwenden, wenn keine Bedeutung passt

<div> ist ein neutraler umschließender Block. <span> ist ein neutrales umschließendes Element innerhalb einer Textzeile. Sie bieten Ansatzpunkte für eine Klasse, ein Sprachattribut oder eine spätere Gestaltung, ohne eine besondere Aufgabe des Inhalts zu behaupten.

<p>Try <span lang="fr">pain au chocolat</span> today.</p>

Das span-Element kennzeichnet die französische Passage, ohne einen neuen Block einzuleiten. Eine ganze Seite aus allgemeinen div-Elementen zu bauen, lässt nützliche Aufgaben verloren gehen; jedes div-Element in ein section-Element umzuwandeln, erfindet dagegen Themen, die nicht vorhanden sind.

Wähle anhand der Frage, was der Block tut:

1. Ist es der Inhalt, der nur auf dieser Seite steht? Verwende main als äußeren Bereich.
2. Ist es eine größere Navigationsgruppe? Verwende nav.
3. Könnte er als vollständiger Beitrag für sich stehen? Ziehe article in Betracht.
4. Ist es ein thematischer Teil mit Überschrift? Ziehe section in Betracht.
5. Ist es indirekt zugehöriger ergänzender Inhalt? Ziehe aside in Betracht.
6. Ist es nur ein umschließendes Element? Verwende div oder span innerhalb von Text.

Auch <address> hat eine bestimmte Bedeutung: Kontaktinformationen für den nächstgelegenen Artikel oder die Seite. Ein E-Mail-Link im Kontaktfußbereich einer Website kann dorthin gehören. Eine Postadresse, die als historische Tatsache oder Veranstaltungsort genannt wird, wird nicht allein deshalb zu einer Kontaktinformation, weil sie einen Straßennamen enthält.

Plane die Aufgaben der Bereiche und die Lesereihenfolge, bevor du eine vollständige Seite schreibst. Ein einfacher Wireframe benennt die Bereiche, während eine Überschriftengliederung den Inhalt darin benennt. Zusammen geben sie die Elemente und ihre Verschachtelung vor.

Den Inhalt planen

Setze bei einer Rezeptseite den wiederholten Namen der Website und das Menü in einen Kopfbereich, das Rezept in main und die Website-Informationen in einen Fußbereich. Das Rezept ist eigenständig, daher passt ein article-Element in main. Seine Gliederung lautet „Tomatensuppe“ mit „Zutaten“ und „Zubereitung“ darunter.

Die folgende Seite liegt in einem Ordner recipes/. Ihre Startseite und ihr Bildordner liegen eine Ordnerebene höher:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tomato Soup – Harbor Café Recipes</title>
  </head>
  <body>
    <a href="#main-content">Skip to main content</a>
    <header>
      <p><a href="../index.html">Harbor Café</a></p>
      <nav>
        <ul>
          <li><a href="../index.html">Home</a></li>
          <li><a href="index.html">Recipes</a></li>
        </ul>
      </nav>
    </header>
    <main id="main-content">
      <article>
        <h1>Tomato Soup</h1>
        <p>Published <time datetime="2026-03-14">March 14, 2026</time></p>
        <figure>
          <img src="../images/tomato-soup.jpg" alt="A bowl of red tomato soup with a swirl of cream" width="1200" height="800">
          <figcaption>Ready in 30 minutes.</figcaption>
        </figure>
        <h2>Ingredients</h2>
        <ul>
          <li>1 kg ripe tomatoes</li>
          <li>1 onion</li>
          <li>500 ml vegetable stock</li>
        </ul>
        <h2>Method</h2>
        <ol>
          <li>Chop the onion and tomatoes.</li>
          <li>Simmer them in the stock for 20 minutes.</li>
          <li>Blend until smooth.</li>
        </ol>
      </article>
    </main>
    <footer>
      <p>&copy; 2026 Harbor Café</p>
    </footer>
  </body>
</html>

Die Entscheidungen im Code nachvollziehen

Der Sprunglink steht an erster Stelle im Dokumentkörper und verweist auf die eindeutige ID des Hauptbereichs. Der Kopfbereich enthält den wiederholten Namen beziehungsweise das Logo der Website und die Navigation. Der Rezeptartikel hat die einzige Hauptüberschrift der Seite, gefolgt von zwei gleichrangigen <h2>-Abschnitten.

Die Zutaten verwenden eine ungeordnete Liste, weil eine Änderung ihrer Anzeigereihenfolge nicht verändert, was benötigt wird. Die Zubereitung verwendet eine geordnete Liste, weil die Schritte eine Abfolge bilden. Der Alternativtext des Fotos ersetzt das Bild; seine Abbildungsbeschriftung liefert Kontext zur Zubereitung.

../index.html führt eine Ebene nach oben zur Startseite. index.html bleibt im Rezeptordner. Keiner der beiden Menülinks ist mit aria-current="page" gekennzeichnet, weil die angezeigte Seite das Suppenrezept ist und nicht eine der beiden Übersichtsseiten.

Die fertige Seite prüfen

Lies den Quelltext von oben nach unten. Seine Reihenfolge sollte für Tastaturnutzer und Screenreader funktionieren, bevor CSS etwas anders anordnet. Prüfe den Titel, die Überschriftengliederung, das einzelne sichtbare main-Element, Linkpfade und Bildalternativen. Führe das HTML-Prüfprogramm aus und behebe seine Meldungen; teste dann die Links und Bilder im Browser.

Halte auf mehreren Seiten denselben wiederholten Kopfbereich, dasselbe Menü und denselben Fußbereich bei. Gib jeder Seite ihren eigenen Titel und ihre eigene Hauptüberschrift und passe relative Pfade ausgehend von ihrem Ordner an. Farben, Schriftarten, Abstände und Spalten können dann durch CSS ergänzt werden, ohne die bereits festgelegten Aufgaben zu ändern.