. Der Browser lädt es parallel zum Parsen und führt es aus, sobald das Dokument geparst ist, in der richtigen Reihenfolge. Skripte mit type=\"module\" werden automatisch verzögert. Nutze async nur für unabhängige Skripte wie Analytics."}},{"@type":"Question","name":"Brauche ich das Meta-Tag X-UA-Compatible?","acceptedAnswer":{"@type":"Answer","text":"Nein. Es betraf nur alte Versionen des Internet Explorer, den Microsoft nicht mehr unterstützt. Aktuelle Boilerplates lassen es weg."}},{"@type":"Question","name":"Welche Favicon-Dateien brauche ich wirklich?","acceptedAnswer":{"@type":"Answer","text":"Eine favicon.ico im Stammverzeichnis der Website für alte Tools und Crawler, ein SVG-Icon für moderne Browser und ein 180 mal 180 Pixel großes apple-touch-icon als PNG für iOS-Startbildschirme decken fast jeden Fall ab. Ein Web App Manifest ergänzt größere Icons, wenn deine Website installierbar sein soll."}},{"@type":"Question","name":"Was ist der Unterschied zwischen defer und async?","acceptedAnswer":{"@type":"Answer","text":"Beide laden, ohne den Parser zu blockieren. defer wartet, bis das Parsen fertig ist, und behält die Reihenfolge der Skripte im Dokument bei. async führt jedes Skript aus, sobald es ankommt, in beliebiger Reihenfolge, was Skripte kaputt machen kann, die voneinander oder vom DOM abhängen."}}]}
HTML-Boilerplate: eine moderne Vorlage, Zeile für Zeile erklärt
HTML-Boilerplate-Generator
HTML-Boilerplate: kommentierte Vorlage und Generator | We.Inc
Eine moderne HTML5-Boilerplate, Zeile für Zeile erklärt, plus ein Generator für Titel, Beschreibung, Sprache, Open Graph, Favicons, Theme-Farbe und CSS- oder JS-Links. Kopiere index.html oder lade sie herunter.
Eine minimale HTML5-Boilerplate braucht einen Doctype, ein html-Element mit lang-Attribut, einen head mit UTF-8-Charset, dem Viewport-Meta-Tag, einem Titel und einer Beschreibung und danach einen body. Binde CSS mit einem link-Tag im head ein und JavaScript mit einem script-Tag mit defer. Erzeuge deine Vorlage unten und lade index.html herunter.
Die Zeilen, die jede Seite braucht
Zeile
Warum
<!doctype html>
Schaltet den Standardmodus ein
<html lang="en">
Sprache für Screenreader und Übersetzung
<meta charset="utf-8">
Korrekte Zeichen und Symbole
<meta name="viewport" ...>
Richtige Skalierung auf Handys
<title>
Tab-Text und Überschrift im Suchergebnis
Der Generator schreibt mit wenigen Schaltern eine vollständige, gültige index.html: Seitentitel und Beschreibung, Sprache, Open-Graph-Tags für Linkvorschauen, ein Favicon-Set, Theme-Farbe, Preconnect-Hinweise sowie die Links zu deinem Stylesheet und Skript mit dem Ladeattribut deiner Wahl. Jede Zeile, die er erzeugen kann, wird in der kommentierten Vorlage weiter unten erklärt.
Fülle Titel, Beschreibung und Sprache aus und schalte die Extras ein, die du möchtest.
Lege fest, wie dein Skript lädt: defer, module oder async. Die Vorschau der Datei aktualisiert sich dabei laufend.
Kopiere das Markup oder lade es als index.html herunter, bereit zum Öffnen im Browser oder Editor.
Lies die kommentierte Version unten, um jede Zeile zu verstehen, bevor du live gehst.
Halte das Charset-Meta-Tag innerhalb der ersten 1024 Bytes der Datei. Am einfachsten stellst du das sicher, indem du es an den Anfang des head setzt.
Schreibe für jede Seite einen eigenen Titel und eine eigene Beschreibung. Suchmaschinen zeigen sie oft als Überschrift und Snippet des Ergebnisses.
Vermeide maximum-scale=1 oder user-scalable=no im Viewport-Tag. Wer Zoom blockiert, benachteiligt Leser, die größere Schrift brauchen.
Lade Skripte mit defer im head statt am Ende des body. Die Datei wird früh heruntergeladen und läuft trotzdem erst nach dem Parsen.
Verwende für og:image absolute URLs. Soziale Netzwerke holen das Bild von ihren eigenen Servern und können keinen relativen Pfad auflösen.
Häufige Fragen
Wie binde ich eine CSS-Datei in HTML ein?
Füge <link rel="stylesheet" href="styles.css"> in den head ein. Das href ist relativ zur HTML-Datei, css/styles.css zeigt also in einen css-Ordner daneben. Stylesheets im head blockieren das Rendern kurz, und das ist gewollt: Es verhindert, dass kurz Inhalte ohne Styling aufblitzen.
Wo gehört das script-Tag hin?
In den head mit defer, zum Beispiel <script src="app.js" defer></script>. Der Browser lädt es parallel zum Parsen und führt es aus, sobald das Dokument geparst ist, in der richtigen Reihenfolge. Skripte mit type="module" werden automatisch verzögert. Nutze async nur für unabhängige Skripte wie Analytics.
Brauche ich das Meta-Tag X-UA-Compatible?
Nein. Es betraf nur alte Versionen des Internet Explorer, den Microsoft nicht mehr unterstützt. Aktuelle Boilerplates lassen es weg.
Welche Favicon-Dateien brauche ich wirklich?
Eine favicon.ico im Stammverzeichnis der Website für alte Tools und Crawler, ein SVG-Icon für moderne Browser und ein 180 mal 180 Pixel großes apple-touch-icon als PNG für iOS-Startbildschirme decken fast jeden Fall ab. Ein Web App Manifest ergänzt größere Icons, wenn deine Website installierbar sein soll.
Was ist der Unterschied zwischen defer und async?
Beide laden, ohne den Parser zu blockieren. defer wartet, bis das Parsen fertig ist, und behält die Reihenfolge der Skripte im Dokument bei. async führt jedes Skript aus, sobald es ankommt, in beliebiger Reihenfolge, was Skripte kaputt machen kann, die voneinander oder vom DOM abhängen.
Was in den head gehört
Der head enthält Informationen über die Seite statt Inhalt: Zeichensatz, Viewport, Titel, Beschreibung, Links zu Stylesheets, Icons und Tags für Social-Media-Vorschauen. Nichts davon wird im body der Seite angezeigt.
Die Reihenfolge spielt eine kleine Rolle. Zuerst das Charset, dann der Viewport, danach Titel und Beschreibung. Setze Preconnect-Hinweise vor die Stylesheets, die sie brauchen, damit die Verbindung so früh wie möglich aufgebaut wird.
Open Graph und Linkvorschauen
Wenn jemand deine URL in einer Messaging-App oder einem sozialen Netzwerk teilt, stammt die Vorschaukarte aus og:title, og:description, og:image und og:url. Ohne diese Tags raten die Plattformen, oft schlecht.
Ein Bild mit 1200 mal 630 Pixeln funktioniert in allen großen Netzwerken. twitter:card mit dem Wert summary_large_image fordert bei X die große Version der Karte an.
Die Boilerplate, Zeile für Zeile
Eine vollständige moderne index.html
Alles, was eine Produktionsseite normalerweise braucht, und nichts, was sie nicht braucht. Die Tabelle unten erklärt jede Zeile.
Was jede Zeile macht
Zeile
Was sie macht
Pflicht?
<!doctype html>
Sagt dem Browser, den Standardmodus statt des Quirks-Modus zu nutzen
Ja
<html lang="en">
Gibt die Sprache der Seite für Hilfstechnologien, Silbentrennung und Übersetzung an
Ja
<meta charset="utf-8">
Zeichenkodierung, damit Akzente, Symbole und Emoji korrekt angezeigt werden
Verhindert, dass Handys eine herausgezoomte Desktop-Seite anzeigen
Ja
<title>
Browser-Tab, Lesezeichen und meist die Überschrift im Suchergebnis
Ja
<meta name="description">
Wird oft als Snippet in der Suche verwendet
Dringend empfohlen
<link rel="canonical">
Die bevorzugte URL, wenn die Seite unter mehreren erreichbar ist
Empfohlen
<meta name="theme-color">
Färbt in manchen mobilen Browsern die Symbolleiste ein
Optional
<link rel="icon"> und apple-touch-icon
Tab-Icon und Icon auf dem Startbildschirm
Empfohlen
og:- und twitter:-Meta-Tags
Titel, Text und Bild für Vorschauen geteilter Links
Empfohlen
<link rel="preconnect">
Baut eine Verbindung zu einem anderen Origin auf, bevor sie gebraucht wird
Optional
<link rel="stylesheet">
Lädt dein CSS
Wenn du CSS hast
<script defer>
Lädt JavaScript, ohne das Parsen zu blockieren, und führt es danach aus
Wenn du JS hast
<main>
Kennzeichnet den Hauptinhalt für Hilfstechnologien
Empfohlen
CSS in HTML einbinden
Drei Wege, CSS hinzuzufügen
Eine externe Datei ist die Regel, weil der Browser sie seitenübergreifend cacht. Ein style-Block eignet sich für seitenspezifische Regeln, das style-Attribut für einmalige Werte.
Relative Pfade erklärt
Die meisten kaputten Stylesheets haben einen falschen Pfad. Prüfe im Netzwerk-Tab der Entwicklertools, ob ein 404 auftaucht.
JavaScript richtig einbinden
Optionen zum Laden von Skripten
Markup
Blockiert das Parsen?
Läuft wann
Reihenfolge erhalten?
<script src="a.js">
Ja
Sofort, wenn es erreicht wird
Ja
<script src="a.js" defer>
Nein
Nach dem Parsen, vor DOMContentLoaded
Ja
<script src="a.js" async>
Nein (hält kurz zum Ausführen an)
Sobald es heruntergeladen ist
Nein
<script type="module" src="a.js">
Nein
Wie defer
Ja
Empfohlene script-Tags
Module bekommen den Strict Mode, einen eigenen Scope und Unterstützung für import. Mit nomodule kannst du sehr alten Browsern ein Fallback ausliefern, falls du das noch brauchst.