HTML
HTML5 boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="UTF-8" />
<title>Your Website Title</title>
<meta name="description" content="A brief description of your website for SEO." />
<meta name="author" content="Your Name or Company" />
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#ffffff" />
<!-- Favicon and App Icons -->
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<!-- CSS -->
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/styles.css" />
<!-- Fonts (example using Google Fonts) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
<!-- Preload important assets -->
<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<!-- Scripts -->
<script defer src="/js/script.js"></script>
</head>
<body>
<!-- Skip to main content for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main-content">
<h1>Welcome to Your Website</h1>
<p>This is a modern HTML5 boilerplate with best practices.</p>
</main>
<footer>
<p>© 2025 Your Company. All rights reserved.</p>
</footer>
</body>
</html>
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.