HTML Semantic Page Layout

Describe the regions of a page with header, nav, main, article, aside, and footer.

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>

Explanation

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.

Explore the dry run

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.	`—`	—

Open lesson and walkthrough Preview example