HTML Semantic Page Layout

The concept

Semantic elements say what a region is, not how it looks. header introduces a page or section, nav holds navigation links, main wraps the unique content of the page, article is a self-contained piece, aside is related content, and footer closes a page or section. Browsers, search engines, and screen readers use these landmarks to help people jump around the page. Use div only when no semantic element fits.

Code example

HTML

<header>
  <h1>Programonic</h1>
  <nav aria-label="Main">
    <a href="/tutorials">Tutorials</a>
    <a href="/examples">Examples</a>
  </nav>
</header>
<main>
  <article>
    <h2>Learning loops</h2>
    <p>A loop repeats a block of code.</p>
  </article>
  <aside>
    <h2>Related</h2>
    <p>Functions and recursion.</p>
  </aside>
</main>
<footer>
  <p>&copy; 2026 Programonic</p>
</footer>

Preview example Example details

Follow the code

Open the walkthrough to inspect the example one step at a time.

Show guided walkthrough

Guided walkthroughReady

1<header>

2 <h1>Programonic</h1>

3 <nav aria-label="Main">

4 <a href="/tutorials">Tutorials</a>

5 <a href="/examples">Examples</a>

6 </nav>

7</header>

8<main>

9 <article>

10 <h2>Learning loops</h2>

11 <p>A loop repeats a block of code.</p>

12 </article>

13 <aside>

14 <h2>Related</h2>

15 <p>Functions and recursion.</p>

16 </aside>

17</main>

18<footer>

20</footer>

Follow the example

Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.

View the complete dry-run table

Prepared trace of the published program. Some rows group repeated iterations.
What happens	State after step	Output so far
header introduces the page. Screen readers announce it as a banner landmark.	`—`	—
nav marks a group of navigation links. The label tells assistive technology which navigation this is.	`—`	—
main holds the content unique to this page. A page should have only one visible main element.	`—`	—
article is a self-contained piece of content that makes sense on its own.	`—`	—
aside is related but separate content, such as a sidebar.	`—`	—
footer closes the page. The browser renders these elements; there is no console output.	`—`	—

Behind the scenes

How HTML processes this code

The browser parses HTML into a document tree and renders its elements. HTML does not execute as a sequence of program statements.