HTML5 semantic page layout — header, nav, main, article, aside and footer

How to use the semantic layout generator

1. Enter the Site name and the Page heading.
2. List Navigation links (comma-separated), for example Home, PDF, Images, Developers, About. Leave it empty for no menu.
3. Set the number of Sections in the article, from 0 to 8.
4. Tick Sidebar (aside) if the page has related links or extra content.
5. Set the Language code, such as en, fr or en-IN.
6. Copy the code or download it as index.html. The Preview draws a dashed outline around each region.

What it does and when to use it

HTML5 has elements that say what each part of a page is for. header holds the logo and site navigation. nav marks a block of main links. main holds the content that is unique to this page, and there should be only one. article is a self-contained piece such as a post or a tool page, section is a headed part of it, aside holds related but separate content, and footer holds the copyright and secondary links.

Using them gives screen readers landmarks, helps search engines find the main content, and makes your CSS easier to read. This generator lays them out in the usual order with one h1 in the article and h2 headings for sections and the sidebar, so the heading outline is correct from the start.

For a head section with meta tags, favicons and social tags, start from the HTML Boilerplate Generator. To give the menu submenus and an aria-current marker, replace the nav with output from the HTML Nav Menu Generator.

How it works

The document starts with <!DOCTYPE html>, <html lang>, a UTF-8 charset, the viewport tag and a title made from “page heading | site name”. The body contains the skip link, the header with a home link and the labelled menu, main id="main" with the article and optional aside, and a footer with © and the site name. All text is HTML-escaped. The preview uses extra CSS only to label the regions; that CSS is not part of the code you copy. Everything runs in your browser.

Worked examples

The default page has five menu links, two sections and a sidebar. Its landmarks start like this:

<a class="skip-link" href="#main">Skip to content</a>
<header>
  <a href="/" class="logo">ToolsRift</a>
  <nav aria-label="Main">

and continue with <main id="main">, <article>, two <section> blocks and <aside aria-label="Related">.

A minimal recipe page. Site “Asha’s Recipes”, heading “Lemon rice”, language en-IN, no menu, no sections, no sidebar. The title is <title>Lemon rice | Asha&#39;s Recipes</title>; the apostrophe is escaped. The header holds only the logo link, and the article holds only <h1>Lemon rice</h1>.

Limits and tips

• Section headings are placeholders (“Section 1”) with … as content. Replace them with your real text.
• Add a skip-link style before publishing, or the link shows at the top of the page.
• Check the finished page with the HTML Validator after you fill in content.