Page Shell

Base HTML5 document structure with header, main content area, and footer. The foundation for every page.

Overview

This snippet provides a complete HTML5 page structure with semantic landmarks. It includes the essential document setup: DOCTYPE, meta tags, CSS imports, and the basic page layout grid.

Key features:

Semantic HTML5 structure (header, main, footer)
CSS Grid for sticky footer layout
Responsive navigation with pill styling
Skip link for keyboard accessibility
Module script loading for JavaScript

Live Example

A minimal page with header navigation, main content area, and footer.

Source Code

Copy this as your starting point for any new page.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title - Site Name</title>  <link rel="stylesheet" href="/src/main.css">  <style> body { min-block-size: 100vh; display: grid; grid-template-rows: auto 1fr auto; } </style> </head> <body> <a href="#main" class="skip-link">Skip to main content</a> <header> <a href="/" class="logo">Site Name</a> <nav class="horizontal pills" aria-label="Main navigation"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/contact/">Contact</a></li> </ul> </nav> </header> <main id="main"> <h1>Page Title</h1>  </main> <footer> <p>© 2026 Site Name. All rights reserved.</p> </footer>  <script type="module" src="/src/main.js"></script> </body> </html>

Structure Breakdown

Document Head

Essential meta tags and resource loading:

<meta charset="UTF-8"> - Character encoding
<meta name="viewport"> - Responsive viewport settings
<link rel="stylesheet"> - Main CSS file
<style> - Sticky footer grid layout

Header

Site branding and primary navigation:

Logo/site name links to homepage
Navigation uses nav.horizontal.pills pattern
aria-label identifies the navigation purpose

Main

Primary content area. The <main> element:

Should contain only one per page
Identifies the main content for assistive technology
Has id="main" so the skip link can target it

Footer

Site-wide footer content:

Copyright and legal information
Secondary navigation links (optional)
Contact information (optional)

Usage Notes

Language: Always set lang attribute on <html> for accessibility
Title: Use format "Page Title - Site Name" for browser tabs and bookmarks
Scripts: Use type="module" for modern JavaScript with ES modules
Sticky footer: Use CSS Grid with grid-template-rows: auto 1fr auto and min-block-size: 100vh