Results are provided for informational purposes only and may contain errors. Please verify important information independently. Use of this tool is at your own risk.
What the HTML Boilerplate Generator does
The HTML Boilerplate Generator writes the starting skeleton of an HTML5 page: the <!DOCTYPE html> declaration, an <html> element with a lang attribute, a <head> with the UTF-8 charset and the page title, and a <body> with a heading. Change the title or language and the code updates immediately.
Three options are on by default and can be switched off: the responsive viewport meta tag (needed for pages to render correctly on phones), a link to style.css, and a script.js tag with the defer attribute, which downloads the script in parallel and runs it after the page has been parsed. The title and language are escaped, so characters such as & or < are safe.
When to use it
- Starting a prototype, a demo or a bug reproduction that needs a clean HTML file.
- Teaching the minimal structure of a valid HTML5 page.
- Creating a static landing page before adding a framework.
- Checking which head tags a page should have before adding SEO tags with the Meta Tag Generator.
Worked example
Input
Title: My Page
Language: en
Viewport, style.css and script.js onOutput
<!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>Common questions about the HTML Boilerplate Generator
Why does the lang attribute matter?
Screen readers use it to pick the right pronunciation, browsers use it to offer translation, and search engines use it as a language signal. Set it to the main language of the content, such as en, fr or he.
What does the viewport meta tag do?
Without it, mobile browsers render the page as if the screen were about 980px wide and then shrink it, so text becomes tiny. width=device-width, initial-scale=1.0 tells them to use the real screen width.
Why is the script placed with defer?
defer lets the browser keep parsing the HTML while the script downloads and runs it once the document is ready. That keeps the page from blocking and means your script can safely look up elements.
What should I add next?
A meta description and social preview tags. The Meta Tag Generator and the Open Graph Tag Generator produce those, and the Robots.txt Generator helps when the site goes live.
Is this tool free?
Yes, it's free to use. No signup, no email required. Get results on this page.
How do I get my result?
Use the tool on this page. Your result appears here; no email delivery is required.