uHTML.de Nachschlagewerke für die tägliche HTML-Arbeit

Das HTML-Grundgerüst

Zuletzt geprüft am von Daniel Weihmann

Jede HTML-Seite beginnt mit denselben paar Zeilen. Sie sind schnell abgetippt und werden trotzdem gern falsch übernommen: ein fehlendes lang, ein charset zu weit unten, ein Viewport-Tag mit user-scalable=no. Diese Seite zeigt das Minimum, erklärt jede Zeile und nennt danach die Angaben, die in echten Projekten fast immer dazukommen.

Das Minimum

Kürzer geht ein valides HTML5-Dokument nicht. <html>, <head> und <body> dürfen laut Spezifikation sogar weggelassen werden, weil der Parser sie ergänzt – schreiben sollte man sie trotzdem, sonst raten Editor, Linter und der nächste Mensch am Projekt. 

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Titel der Seite</title>
</head>
<body>
  <h1>Überschrift</h1>
  <p>Text.</p>
</body>
</html>
Fünf Pflichtangaben, mehr braucht der Validator nicht.

Zeile für Zeile

<!DOCTYPE html>
Schaltet den Browser in den Standards-Modus. Ohne diese Zeile landet die Seite im Quirks-Modus und rechnet Boxmodell und Zeilenhöhen nach den Regeln der späten Neunziger. Der Doctype ist kein Tag, hat keinen schließenden Teil und muss die allererste Zeile sein – vor ihm darf nur ein Byte-Order-Mark stehen, kein Kommentar, keine Leerzeile mit Inhalt.
<html lang="de">
Die Sprachangabe ist die billigste Barrierefreiheits-Maßnahme überhaupt. Screenreader wählen danach die Aussprache; ohne lang liest eine englische Stimme deutschen Text vor. Auch Browser-Übersetzung und Silbentrennung per hyphens: auto hängen daran. Für eine deutsche Seite reicht de, Regionalvarianten wie de-AT nur, wenn sie wirklich zutreffen.
<meta charset="utf-8">
Muss in den ersten 1024 Bytes des Dokuments stehen, deshalb gehört sie ganz nach oben in den <head>. Findet der Browser sie nicht rechtzeitig, rät er die Kodierung und liefert die bekannten „ä"-Buchstabensalate. Wichtig: Die Angabe beschreibt die Datei, sie ändert sie nicht. Der Editor muss die Datei tatsächlich als UTF-8 speichern.
<meta name="viewport" …>
Ohne diese Zeile tut ein Smartphone so, als sei es rund 980 Pixel breit, und zoomt die fertige Seite herunter – Media Queries greifen dann ins Leere. width=device-width, initial-scale=1 ist der Standardwert und genügt. Was dort nicht hingehört: user-scalable=no oder ein maximum-scale unter 5, weil beides das Zoomen verhindert und gegen WCAG 1.4.4 verstößt.
<title>
Die einzige Pflichtangabe im <head> mit sichtbarem Text. Sie steht im Browser-Tab, im Lesezeichen, in der Suchergebnisliste und ist das Erste, was ein Screenreader beim Laden vorliest. Ein Dokument ohne <title> ist ungültig, ein leerer zählt genauso.

Was in der Praxis dazukommt

Pflicht ist nichts davon, aber in einem echten Projekt fehlt selten eine dieser Zeilen. Die Reihenfolge im <head> ist dabei nicht beliebig: charset zuerst, danach viewport und title, dann alles, was Dateien nachlädt. 

<link rel="canonical" href="https://example.de/seite/">
<meta name="description" content="Ein Satz, der die Seite beschreibt.">
<meta name="robots" content="index,follow">

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/assets/css/style.css">

<meta property="og:title" content="Titel für geteilte Links">
<meta property="og:description" content="Beschreibung für geteilte Links">
<meta property="og:image" content="https://example.de/bild.jpg">
<meta property="og:url" content="https://example.de/seite/">
Übliche Ergänzungen: Kanonische URL, Beschreibung, Icon, Stylesheet, Vorschaubild.
  • canonical nennt die eine gültige Adresse der Seite. Sinnvoll, sobald derselbe Inhalt unter mehreren URLs erreichbar ist – mit und ohne www, mit und ohne abschließenden Schrägstrich, mit angehängten Parametern.
  • description ist kein Rankingfaktor, wird von Suchmaschinen aber oft als Textauszug übernommen. Ohne sie schneidet die Suchmaschine selbst etwas aus dem Fließtext.
  • og:image braucht eine absolute URL und sollte kein WebP sein – einige Dienste zeigen das Bild sonst nicht an. JPEG oder PNG, etwa 1200 × 630 Pixel.
  • stylesheet gehört in den <head>, Skripte dagegen ans Ende des <body> oder in den Kopf mit defer. Sonst wartet der Parser auf die Datei, bevor er weiterzeichnet.

Der Rumpf

Im <body> beginnt die eigentliche Auszeichnung. Die Landmarken-Elemente kosten nichts und geben Screenreadern eine Gliederung, über die sich springen lässt. Zum Ausprobieren fehlt dann nur noch Text, den liefert ein Blindtext-Generator. 

<body>
  <a class="skip-link" href="#inhalt">Zum Inhalt springen</a>

  <header>
    <nav aria-label="Hauptnavigation">…</nav>
  </header>

  <main id="inhalt">
    <h1>Genau eine H1 pro Seite</h1>
    <article>…</article>
  </main>

  <aside>…</aside>

  <footer>…</footer>
</body>

<main> darf pro Seite nur einmal sichtbar vorkommen und enthält das, was diese Seite von jeder anderen unterscheidet – also weder Kopfzeile noch Navigation noch Fußzeile. Gibt es mehrere <nav>-Bereiche, bekommt jeder ein eigenes aria-label, sonst heißen sie im Screenreader alle gleich „Navigation".

Fehler, die immer wieder auftauchen

  • Doctype nicht in Zeile 1. Ein PHP-Block, ein BOM-freies Leerzeichen oder eine Ausgabe vor dem Include reichen, und der Browser fällt in den Quirks-Modus zurück. Prüfen lässt sich das in den Entwicklerwerkzeugen: document.compatMode muss CSS1Compat liefern, nicht BackCompat.
  • Kein lang am <html>-Element. Fällt beim Ansehen nie auf und ist trotzdem einer der häufigsten Befunde in Barrierefreiheits-Prüfungen.
  • Zwei H1 oder gar keine. Die Überschriftenebenen sind das Inhaltsverzeichnis der Seite. Sie dürfen nicht springen: nach h2 kommt h3, nicht h4.
  • Selbstschließende Schrägstriche aus XHTML-Zeiten. <br /> ist in HTML5 erlaubt, aber überflüssig; bei Elementen mit Inhalt wie <div /> wird der Schrägstrich ignoriert und die Struktur bricht.
  • Attributwerte ohne Anführungszeichen. Funktioniert bei einzelnen Wörtern, geht aber sofort schief, sobald ein Leerzeichen im Wert steht – etwa bei zwei CSS-Klassen.

Gegenprobe: Der Nu Html Checker des W3C prüft eine URL oder eingefügten Quelltext in wenigen Sekunden und meldet genau die Punkte von oben. Er ersetzt keine Prüfung auf Barrierefreiheit, findet aber jeden Strukturfehler.

Passend dazu: die Tabelle der HTML-Sonderzeichen für alles, was sich nicht direkt tippen lässt, die Übersicht der semantischen Elemente für den Aufbau des Rumpfes und die Seite zur Barrierefreiheit in HTML, die bei lang, alt und Formular-Labels weiter ins Detail geht.