HTML5 Page Frames
The old <frame>/<frameset> tags were removed from HTML5. These semantic "frames" — header, nav, main, aside, footer — are the modern replacement for structuring a page.
Basic HTML5 Boilerplate
The minimum every page should start with: doctype, charset and a responsive viewport.
Blog Post Skeleton
Header, article with byline, sidebar and footer — a standard blog post frame.
Landing Page Skeleton
Hero, features and call-to-action sections — the standard structure for a marketing page.
Dashboard App Skeleton
Fixed sidebar navigation with a scrolling main content area — the standard app-shell frame.
1How To Use
Follow these steps — no coding experience needed.
- Pick the right skeletonChoose the frame closest to the kind of page you're building.
- Copy the structurePaste it in as your starting point, before adding real content.
- Fill in the sectionsReplace each placeholder with your actual headings, text and links.
2Example Output
What this code looks like once it's on a real page.
Using semantic elements like <header>, <main> and <footer>
instead of generic <div>s also helps screen readers and search engines understand your page structure.
3Browser Compatibility
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✓ Supported | Full support |
| Firefox | ✓ Supported | Full support |
| Safari | ✓ Supported | Full support |
| Edge | ✓ Supported | Full support |
| Opera | ✓ Supported | Full support |
| Mobile browsers | ✓ Supported | Full support, iOS & Android |
Supported in every current browser — Chrome, Firefox, Safari, Edge and Opera all render this identically, on both desktop and mobile.
→Related Pages
More tools that pair naturally with this one.