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.
page-shell.html
<!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> <!-- CSS --> <link rel="stylesheet" href="/src/main.css"> <!-- Sticky footer layout --> <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 content here --> </main> <footer> <p>© 2026 Site Name. All rights reserved.</p> </footer> <!-- JavaScript --> <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.pillspattern aria-labelidentifies 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
langattribute 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 autoandmin-block-size: 100vh
Related
Article Layout
Page layout with sidebar navigation
Header Element
Native header element documentation
Nav Element
Navigation element patterns