Quick answerA minimal HTML5 boilerplate is: <!DOCTYPE html>, <html lang="en">, a <head> with <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1"> and a <title>, then a <body> for your content. Add a meta description, favicon, stylesheet and deferred script as needed.
The template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title — Site name</title>
<meta name="description" content="One or two sentences about this page.">
<link rel="canonical" href="https://example.com/page/">
<meta property="og:title" content="Page title">
<meta property="og:description" content="One or two sentences about this page.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/page/">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/style.css">
<script src="/app.js" defer></script>
</head>
<body>
<header></header>
<main>
<h1>Page title</h1>
</main>
<footer></footer>
</body>
</html>Paste it into the online HTML editor to start building, or run it through the HTML validator after you've added content.
What each line does
| Line | Why it's there |
|---|---|
<!DOCTYPE html> | Puts the browser in standards mode. Without it, pages render in "quirks mode" with old, inconsistent rules. |
lang="en" | Tells screen readers, translators and search engines the page language. |
charset="utf-8" | Lets you use any character (é, €, emoji) without garbled text. Must be in the first 1024 bytes. |
viewport | Makes the page fit phone screens instead of showing a zoomed-out desktop layout. |
<title> | Shown in the browser tab and as the blue link in search results. Keep it under ~60 characters. |
description | Often used as the search-result snippet. Aim for 120–160 characters. |
canonical | Tells search engines the preferred URL when the same page is reachable at several. |
og:* / twitter:card | Controls the preview card when the link is shared on social media and chat apps. |
icon | The favicon in tabs and bookmarks. |
defer | Downloads the script without blocking the page and runs it after the HTML is parsed. |
What you no longer need
<meta http-equiv="X-UA-Compatible" content="IE=edge">— only mattered for Internet Explorer, which is retired.type="text/javascript"andtype="text/css"— they're the defaults.- Long XHTML doctypes and
xmlnsattributes. - The
keywordsmeta tag — search engines ignore it.
The absolute minimum
For a quick test file, this is enough and still valid:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<p>Hello</p>HTML allows omitting <head> and <body> tags — the browser adds them. Most people keep them for readability.
Frequently asked questions
What is an HTML boilerplate?
The standard starting code every HTML page needs: doctype, html, head with charset, viewport and title, and body.
Is the viewport meta tag required?
It isn't required to be valid, but without it your page will look tiny and zoomed-out on phones, and Google's mobile checks flag it.
Where should I put script tags?
In the head with the defer attribute, or just before </body>. Both stop scripts from blocking the page from showing.
Do I need the html, head and body tags?
Technically they're optional, because browsers add them automatically, but keeping them makes your code clearer and avoids surprises.
Is there a shortcut to generate this?
In VS Code, type ! and press Tab in an .html file. Or start from the template on this page in the online HTML editor.