Die Ergebnisse dienen nur zu Informationszwecken und können Fehler enthalten. Bitte überprüfen Sie wichtige Informationen unabhängig. Die Nutzung dieses Tools erfolgt auf eigene Gefahr.
Was dieses Tool macht
Der HTML-Boilerplate-Generator schreibt das Grundgerüst einer HTML5-Seite: die <!DOCTYPE html>-Deklaration, ein <html>-Element mit lang-Attribut, einen <head> mit UTF-8-Zeichensatz und Seitentitel sowie einen <body> mit einer Überschrift. Ändern Sie Titel oder Sprache, wird der Code sofort aktualisiert.
Drei Optionen sind standardmäßig aktiviert und lassen sich abschalten: das responsive Viewport-Meta-Tag (nötig, damit Seiten auf Smartphones korrekt dargestellt werden), ein Link auf style.css und ein script.js-Tag mit dem Attribut defer, das das Skript parallel herunterlädt und erst ausführt, nachdem die Seite geparst wurde. Titel und Sprache werden escaped, sodass Zeichen wie & oder < unbedenklich sind.
Wann Sie es verwenden
- Sie beginnen einen Prototyp, eine Demo oder eine Bug-Reproduktion, die eine saubere HTML-Datei braucht.
- Sie vermitteln die minimale Struktur einer gültigen HTML5-Seite.
- Sie erstellen eine statische Landingpage, bevor ein Framework hinzukommt.
- Sie prüfen, welche Head-Tags eine Seite haben sollte, bevor Sie mit dem Meta-Tag-Generator SEO-Tags ergänzen.
Beispiel
Eingabe
Seitentitel: My Page
Sprachcode: en
Viewport, style.css und script.js aktiviertAusgabe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Page</h1>
<script src="script.js" defer></script>
</body>
</html>Fragen zu diesem Tool
Warum ist das lang-Attribut wichtig?
Screenreader wählen damit die richtige Aussprache, Browser bieten darauf basierend eine Übersetzung an, und Suchmaschinen nutzen es als Sprachsignal. Setzen Sie es auf die Hauptsprache des Inhalts, etwa en, fr oder he.
Was bewirkt das Viewport-Meta-Tag?
Ohne dieses Tag rendern mobile Browser die Seite, als wäre der Bildschirm etwa 980px breit, und verkleinern sie dann – der Text wird winzig. width=device-width, initial-scale=1.0 weist sie an, die tatsächliche Bildschirmbreite zu verwenden.
Warum wird das Skript mit defer eingebunden?
Mit defer parst der Browser das HTML weiter, während das Skript heruntergeladen wird, und führt es aus, sobald das Dokument bereit ist. So blockiert die Seite nicht, und Ihr Skript kann gefahrlos auf Elemente zugreifen.
Was sollte ich als Nächstes ergänzen?
Eine Meta-Beschreibung und Tags für Social-Media-Vorschauen. Diese erzeugen der Meta-Tag-Generator und der Open-Graph-Tag-Generator, und der Robots.txt-Generator hilft, wenn die Website live geht.
Ist dieses Tool kostenlos?
Ja, es ist kostenlos. Ohne Anmeldung und ohne E-Mail. Ergebnisse direkt auf dieser Seite.
Wie erhalte ich mein Ergebnis?
Nutze das Tool auf dieser Seite. Das Ergebnis erscheint hier und wird nicht per E-Mail zugestellt.