A Reusable HTML Page Structure for New Projects
Begin with a small, valid document shell that supports accessibility, responsive design, metadata, and progressive enhancement.
The short version
A dependable starter should be boring, explicit, and easy to extend.
Use a complete document shell
A starter should declare the doctype, language, character encoding, and viewport before adding application-specific markup. Keep the head understandable. Every tag should have a reason to exist.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project title</title>
<meta name="description" content="A precise summary of this page.">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header>…</header>
<main id="main">…</main>
<footer>…</footer>
<script type="module" src="/app.js"></script>
</body>
</html>Add capability only when the page needs it
Do not start every project with a large framework, icon font, analytics bundle, and animation library. Begin with the content and the one or two interactions the page actually requires. A smaller dependency surface is easier to audit and easier to hand off.
Keep the starter valid over time
Save the starter as a template only after it survives a real project. The best template captures patterns you have verified, not every pattern you might someday need.
- Run an HTML validator after structural changes.
- Test the skip link and keyboard focus.
- Check the page at narrow and wide widths.
- Confirm metadata uses the production host.
- Remove commented experiments before publishing.