HTML5 Boilerplate

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Page Title · Brand Name</title>

  <!-- SEO Meta -->
  <meta name="description" content="Page description for search engines">
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <link rel="canonical" href="https://example.com/">

  <!-- Open Graph (Social Sharing) -->
  <meta property="og:title" content="Share Title">
  <meta property="og:description" content="Share description">
  <meta property="og:image" content="https://example.com/share-image.jpg">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Share Title">
  <meta name="twitter:description" content="Share description">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Preload Critical Resources -->
  <link rel="preload" href="fonts/inter.woff2" as="font" crossorigin>
  <link rel="preload" href="hero.webp" as="image">

  <!-- Styles -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Skip Navigation (Accessibility) -->
  <a href="#main" class="skip-link">Skip to main content</a>

  <!-- Header / Navigation -->
  <header class="header">
    <nav class="nav container">
      <a href="/" class="logo" aria-label="Homepage">
        <img src="logo.svg" alt="Brand Logo" width="120" height="32">
      </a>
      <button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
      <ul class="nav-menu" role="navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content -->
  <main id="main">
    <section class="hero">
      <div class="container">
        <h1>Headline</h1>
        <p>Subtitle or description</p>
        <a href="/get-started" class="btn btn-primary">CTA Button</a>
      </div>
    </section>

    <section class="features">
      <div class="container">
        <!-- Feature cards -->
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p>&copy; 2026 Brand Name. All rights reserved.</p>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="app.js" defer></script>
</body>
</html>

Key Features of This Template

Feature Benefit
SEO meta tags Better search engine visibility
Open Graph tags Rich social sharing previews
Skip link Accessibility compliance
Semantic HTML Screen reader friendly
Preload Faster LCP performance
Defer scripts Non-blocking JS loading
ARIA labels Enhanced accessibility

Quick Customization

  1. Update lang="en" for your language
  2. Replace meta description and keywords
  3. Add your Open Graph image URL
  4. Update favicon paths
  5. Replace placeholder content in sections