Was in ein modernes HTML-Boilerplate gehört

Ein modernes HTML-Boilerplate braucht fünf Dinge: den HTML5-Doctype, ein lang-Attribut am <html>-Element, eine UTF-8-Zeichensatzdeklaration, ein Viewport-Meta-Tag und einen eindeutigen <title>. Alles andere hängt davon ab, ob die Seite geteilt, installiert oder als Lesezeichen gespeichert wird.

Die meisten Seiten entstehen aus Emmets !-Snippet, der index.html eines Frameworks oder einer zehn Jahre alten Kopie von HTML5 Boilerplate. Diese Zeilen prüft später niemand mehr, und so wandern veraltete Einträge von Projekt zu Projekt.

Dieser Artikel geht das Dokument Zeile für Zeile durch. Für jede Zeile wird erläutert, was sie bewirkt, was ohne sie nicht funktioniert und ob sie erforderlich, optional oder bedenkenlos zu löschen ist. Zur Reihenfolge im Head und zum Thema Metadaten im Allgemeinen lesen Sie den begleitenden Artikel darüber, was tatsächlich in den Head Ihres Dokuments gehört.

Das erzeugt Emmets !:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Das ist ein gültiger Ausgangspunkt. Es fehlen jedoch Description, Canonical, Social-Tags, Icons und color-scheme, und der Viewport enthält einen Wert, den Sie nicht mehr brauchen.

Doctype und das lang-Attribut

Erforderlich. <!DOCTYPE html> versetzt den Browser in den Standards-Modus. Fehlt er, fällt der HTML-Parser in den Quirks-Modus zurück, der Layoutfehler alter Browser nachbildet. Die Folge sind Abweichungen beim Box-Modell und bei der Tabellendimensionierung, die sich durch kein noch so langes CSS-Debugging erklären lassen.

Erforderlich. Das lang-Attribut am <html>-Element erfüllt drei Aufgaben:

• Es teilt Screenreadern mit, welche Ausspracheregeln sie anwenden sollen.
• Es ermöglicht CSS hyphens: auto, Wörter anhand des richtigen Wörterbuchs zu trennen.
• Es hilft den Übersetzungsfunktionen des Browsers, die Sprache der Seite zu bestimmen.

Ohne das Attribut liest ein Screenreader französischen Text womöglich mit englischer Phonetik vor. Der Wert ist ein BCP-47-Sprach-Tag wie en, de oder pt-BR, und untergeordnete Elemente können ihn überschreiben, wie in der lang-Referenz von MDN beschrieben.

lang betrifft Barrierefreiheit und Sprache, nicht das Suchmaschinenranking. Google Search gibt an, dass lang ignoriert und die Sprache anhand des Seiteninhalts erkannt wird.

<!DOCTYPE html>
<html lang="en">

Zuerst Charset, dann Viewport

Erforderlich. <meta charset="UTF-8"> muss innerhalb der ersten 1024 Bytes des Dokuments stehen. Deshalb gehört es an den Anfang von <head>, noch vor <title> und jeden anderen Text, den der Browser sonst mit der falschen Kodierung dekodieren könnte. Fehlt es oder steht es zu spät, werden Umlaute, Akzente und Emojis in Ihrem Titel zu Zeichensalat (Mojibake).

Erforderlich. Das Viewport-Tag weist mobile Browser an, die Seite in der Breite des Geräts darzustellen. Ohne es rendern Smartphones ein Layout in Desktop-Breite (meist etwa 980px) und verkleinern es, sodass Ihre Media Queries nie greifen. width=device-width genügt für sich allein, initial-scale=1 ist in der Regel überflüssig. Die vollständige Liste der Werte finden Sie in der Viewport-Referenz von MDN.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

Optional, vorher testen. <meta name="text-scale" content="scale"> ist im Entwurf von CSS Fonts Level 5 definiert und wird nur von Chromium-basierten Browsern unterstützt. Es sorgt dafür, dass die Root-Schriftgröße der Textgröße folgt, die der Nutzer in den Einstellungen seines Betriebssystems oder Browsers wählt. Dadurch wächst nur Text in rem und em, und Komponenten mit fester Höhe können überlaufen. Erhöhen Sie die Systemtextgröße und prüfen Sie Ihre Layouts, bevor Sie es ausliefern.

Title, Description und Canonical

Erforderlich. <title> benennt die Seite in Browser-Tabs, Lesezeichen, im Verlauf und in Suchergebnissen. Wenn Sie den Standardwert Document stehen lassen, sieht jeder geöffnete Tab gleich aus.

Optional, aber empfohlen. <meta name="description"> liefert eine Zusammenfassung für Such-Snippets. Google kann sie umschreiben, wenn Inhalte auf der Seite besser zur Suchanfrage passen, und kürzt Snippets anhand der Anzeigebreite. Regeln, die auf der Zeichenanzahl basieren, sind daher unzuverlässig.

Optional, aber empfohlen. <link rel="canonical"> gibt die bevorzugte URL an, wenn derselbe Inhalt unter mehreren Adressen erreichbar ist, etwa mit Query-Strings oder Varianten mit und ohne abschließenden Schrägstrich. Mehr dazu finden Sie in SEO-relevante HTML-Tags und wie man sie optimiert.

<title>Page title – Site name</title>
<meta name="description" content="One or two sentences describing this page.">
<link rel="canonical" href="https://example.com/page">

Open-Graph- und Twitter-Card-Tags

Optional, aber erforderlich für alles, was geteilt wird. Open-Graph-Tags steuern die Linkvorschau auf Social-Media-Plattformen und in Chat-Apps. Ohne sie erscheint ein geteilter Link als bloße URL oder als Karte, die aus dem zusammengesetzt wird, was der Scraper gerade findet.

Das Open-Graph-Protokoll führt og:title, og:type, og:image und og:url als erforderliche Eigenschaften auf und legt fest, dass eine Seite ohne Typ als website behandelt werden soll. Setzen Sie og:url auf denselben Wert wie Ihre Canonical-URL, damit Links mit Tracking-Parametern nicht als separate Seiten gecacht werden. Für og:image empfiehlt Meta ein Bild mit mindestens 1200×630 Pixeln und einem Seitenverhältnis möglichst nahe an 1,91:1.

X liest eigene twitter:*-Tags, die mit name statt property geschrieben werden, und greift auf die entsprechenden og:*-Werte zurück, wenn diese fehlen. In der Praxis brauchen Sie als X-spezifisches Tag nur twitter:card, und auch das nur, wenn Sie die Karte mit großem Bild möchten.

<meta property="og:title" content="Page title">
<meta property="og:description" content="Description for link previews.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta name="twitter:card" content="summary_large_image">

Um diese Tags pro Seite zu erzeugen, nutzen Sie den Meta-Tag-Generator.

Das Favicon-Set

Optional, wird aber erwartet. Ein vollständiges Favicon-Setup besteht aus vier Teilen. Fehlen sie, erhalten Sie ein leeres Tab-Icon, eine screenshotartige Kachel auf iOS-Homescreens und generische Installations-Icons unter Android.

• Eine 32×32 Pixel große favicon.ico für ältere Browser.
• Eine favicon.svg, die sich an prefers-color-scheme anpassen kann. Safari unterstützt SVG-Favicons seit Safari 26.0.
• Eine 180×180 Pixel große apple-touch-icon.png für iOS-Homescreens.
• Ein Web-App-Manifest mit PNG-Icons in 192×192 und 512×512 Pixeln sowie einer maskierbaren Variante für kreisförmige und Squircle-Masken.

Behalten Sie beide <link rel="icon">-Elemente bei, das für favicon.ico und das für favicon.svg. Browser, die keine SVG-Favicons verwenden können, darunter Safari vor Version 26, erhalten dann weiterhin die ICO-Datei.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #f5f5f5; }
    }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

{
  "name": "Site name",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Wie Sie die einzelnen Dateien erzeugen, erfahren Sie in So fügen Sie Ihrer Website ein Favicon hinzu.

color-scheme und theme-color

Optional, empfohlen, wenn Sie einen Dark Mode anbieten. <meta name="color-scheme" content="light dark"> teilt dem Browser mit, dass die Seite beide Modi unterstützt, noch bevor CSS geladen ist. Standardhintergründe, Formularelemente und Scrollbars folgen dann der Präferenz des Nutzers. Ohne das Tag kann eine Website mit dunklem Theme beim Laden kurz weiß aufblitzen. Siehe MDN zu color-scheme.

Optional. theme-color färbt die Browseroberfläche ein und akzeptiert ein media-Attribut, sodass Sie getrennte Werte für hell und dunkel festlegen können. Es funktioniert in Chromium unter Android, MDN stuft die Browserunterstützung jedoch als eingeschränkt ein. Betrachten Sie es daher als nettes Extra und nicht als etwas, das jeder Browser anzeigt.

<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)">

Ein Standard für reduzierte Bewegung

Optional, dringend empfohlen. Ein Standard für reduzierte Bewegung ist eine Regel für Ihr Basis-Stylesheet, kein Head-Tag. Er gehört ins Boilerplate, weil ihn niemand nachträglich ergänzt. Ein prefers-reduced-motion: reduce-Block verkürzt Animationen und Transitions und deaktiviert das sanfte Scrollen für Nutzer, die in ihrem Betriebssystem weniger Bewegung eingestellt haben.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Die Dauer wird auf 0.01ms statt auf 0 gesetzt, damit animationend und transitionend weiterhin ausgelöst werden. So bleibt JavaScript, das auf diese Events wartet, nicht hängen. Dieser Standard ist bewusst pauschal. Einzelne Komponenten können gezielt wieder dezente Bewegungen wie Opacity-Fades aktivieren, die keine vestibulären Beschwerden verursachen.

Welche Zeilen sollten Sie aus alten Boilerplates löschen?

Löschen. Vier Zeilen in alten HTML-Boilerplates stammen aus Vorlagen der IE-Ära und frühen Responsive-Startern, und keine davon hat heute noch einen Nutzen:

• X-UA-Compatible wählte Dokumentmodi des Internet Explorer aus. Kein Browser, den Sie unterstützen, wertet es aus.
• maximum-scale, minimum-scale und user-scalable=no hindern sehbehinderte Menschen daran, per Pinch-to-Zoom zu vergrößern, was gegen WCAG 1.4.4 Textgröße ändern verstößt. Entfernen Sie sie aus jedem Viewport-Tag.
• shrink-to-fit=no war ein Workaround für ein altes Skalierungsverhalten von iOS Safari und hat keine Wirkung mehr.
• type="text/javascript" wiederholt nur den Standardwert. Die HTML-Spezifikation empfiehlt Autoren, type bei klassischen Skripten wegzulassen.

<!-- Before -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<script type="text/javascript" src="/app.js"></script>

<!-- After -->
<meta name="viewport" content="width=device-width">
<script type="module" src="/app.js"></script>

Ein Skript mit type="module" wird standardmäßig verzögert ausgeführt, läuft also nach dem Parsen, ohne das Rendering zu blockieren. Wenn ein Skript kein Modul sein kann, versehen Sie es mit defer.

Das vollständige HTML-Boilerplate

Das folgende vollständige, moderne HTML-Boilerplate vereint alle erforderlichen und empfohlenen Zeilen aus diesem Artikel. Ergänzen Sie bei Bedarf website-spezifische Extras wie Feeds oder Preloads. Der Skip-Link und die <main>-Landmark gehören in den Body; die semantischen Elemente, die darauf folgen, behandelt der Artikel 10 essenzielle HTML-Elemente.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <!-- Optional, test with large OS text first: <meta name="text-scale" content="scale"> -->
  <title>Page title – Site name</title>
  <meta name="description" content="One or two sentences describing this page.">
  <link rel="canonical" href="https://example.com/page">

  <meta name="color-scheme" content="light dark">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)">

  <link rel="stylesheet" href="/styles.css">
  <script type="module" src="/app.js"></script>

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">

  <meta property="og:title" content="Page title">
  <meta property="og:description" content="Description for link previews.">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <a href="#main">Skip to content</a>
  <main id="main"></main>
</body>
</html>

Nur fünf Zeilen in einem HTML-Boilerplate sind erforderlich. Alles andere ist entweder optional – je nachdem, ob die Seite geteilt, installiert oder mit einem Theme versehen wird – oder eine Altlast, die gelöscht werden sollte. Öffnen Sie die index.html Ihres aktuellen Projekts, gleichen Sie jede Zeile mit der obigen Tabelle ab und entfernen Sie alles aus der Zeile „Löschen“, bevor Sie die Datei ins nächste Projekt übernehmen.

FAQs

Ist meta charset dasselbe wie meta http-equiv Content-Type?

Ja. Gemäß der WHATWG-HTML-Spezifikation erfüllt die Variante mit http-equiv Content-Type dieselbe Aufgabe wie das charset-Attribut. Beide gelten als Zeichenkodierungsdeklaration, und beide müssen innerhalb der ersten 1024 Bytes stehen. Ein Dokument darf nicht beide enthalten, und Validatoren melden dies als Fehler. Verwenden Sie das kürzere meta charset='UTF-8'. Wenn der Server im HTTP-Header Content-Type einen Zeichensatz sendet, stellen Sie sicher, dass dieser ebenfalls UTF-8 lautet.

Brauchen meta- und link-Tags in HTML einen abschließenden Schrägstrich?

Nein. Meta, link, img und die anderen Void-Elemente haben kein schließendes Tag, und der HTML-Parser ignoriert einen abschließenden Schrägstrich bei ihnen. Ein Tag mit Schrägstrich und dasselbe Tag ohne Schrägstrich erzeugen dasselbe Element. Der Schrägstrich ist gültig, hat aber keine Wirkung – es ist also reine Stilfrage. Relevant ist er nur bei einer Seite, die als XHTML mit einem XML-MIME-Typ ausgeliefert wird.

Kann ich die Tags html, head und body weglassen?

Ja. Die HTML-Spezifikation kennzeichnet die Tags html, head und body in vielen Fällen als optional, und der Parser erzeugt diese Elemente auch dann, wenn die Tags fehlen. Ein Boilerplate sollte sie dennoch ausschreiben. Das lang-Attribut benötigt ein explizites html-Start-Tag, an dem es stehen kann, und explizite Tags machen die Grenze zwischen Head und Body leichter lesbar. Wenn Sie das html-Tag weglassen, verlieren Sie auch lang.

Wie ändere ich den Standardwert für lang in Emmets !-Snippet?

Setzen Sie die Variable lang in der VS-Code-Einstellung emmet.variables. Fügen Sie in der settings.json dem Objekt emmet.variables einen Schlüssel lang mit einem Wert wie de hinzu. Emmet schreibt dann bei jeder Expansion des !-Snippets diesen Sprachcode. Dieselbe Einstellung enthält auch eine Variable charset, die Sie auf UTF-8 belassen sollten. Die Viewport-Zeile enthält weiterhin initial-scale=1.0; löschen Sie diesen Wert also von Hand oder definieren Sie ein eigenes Snippet.