Semantic structure

A page is more than headings and paragraphs; it has regions. <header> holds the site title and often the navigation, <nav> a group of links, <main> the unique content of the page, <article> a self-contained piece such as a post, <section> a themed group, <aside> side content, and <footer> the closing information. <div> is the generic box for when nothing else fits.

Browsers show these exactly like <div>, so why bother: screen readers let people jump straight to <main> or <nav>, search engines understand the page better, and your CSS gets meaningful hooks instead of div div div.

<header><h1>Site name</h1></header>
<main><article><h2>A post</h2><p>...</p></article></main>
<footer><p>Contact</p></footer>

Your task

Build a page with a header containing an h1, a nav inside the header with at least two links, a main containing an article with an h2 and a paragraph, and a footer with a paragraph.

This course ends in a one-page site assembled from pieces you build along the way; the header from this lesson is the first of them, and it is saved in this browser for the project.

Part of the final project. header is the page header, with the site title and the navigation. It is saved in this browser and loaded into Project: a one-page site when you get there.

<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<header>
  <h1>My blog</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>
<main>
  <article>
    <h2>First post</h2>
    <p>Welcome to the blog.</p>
  </article>
</main>
<footer>
  <p>Written in 2026.</p>
</footer>
</body>
</html>