EN

HTML・Building the whole page

Build the framework of a page

div was a box with no meaning. But for a page's big parts—the header at the top, the menu, the main content, the bottom—there are "boxes that carry meaning." Let's assemble the framework of a page.

You’ve learned <div>, the “box for grouping.” But <div> was a box that carries no meaning, remember? In fact, for a page’s big parts—the header at the top, the menu, the main content, the footer at the bottom—there’s a dedicated box that carries meaning for each. Think of them as the “meaning-added versions” of <div>.

A page is made of four rooms

Viewed broadly, most pages are made up of these four rooms.

TagRole (which room)
<header>The top of the page. Place the logo and site name here
<nav>The menu. Line up links to other pages
<main>The main content. The star content of that page
<footer>The bottom of the page. Copyright, contact info, and so on

Assembled, it makes a framework like this.

<body>
  <header>
    Shima
    <nav>
      <a href="#about">About Me</a>
      <a href="#likes">Favorites</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <h2>About Me</h2>
    <p>I'm Shima, and I love drawing and ramen.</p>
  </main>

  <footer>
    <p>© 2026 Shima</p>
  </footer>
</body>
Even though the look is the same as ordinary text, it’s split into rooms by role—top, menu, main content, and bottom.

Wrapping everything in <div> looks exactly the same. But because each part has a name for its role, this framework is far easier to read, isn’t it?

section and article, for finer divisions

When you want to divide the contents of <main> even further, you can also use <section> (a meaningful chunk) and <article> (a piece that stands complete on its own).

<main>
  <section id="likes">
    <h2>Favorites</h2>
    <ul>
      <li>Drawing</li>
      <li>Ramen</li>
    </ul>
  </section>
</main>
Dividing with section keeps the look the same. It’s just splitting the contents into rooms by meaning.

The way to choose between <section> and <article> comes down to “does it stand complete on its own when cut out?” A single blog post, one news item, one announcement—something you can read on its own is <article>, and “a single section” within a page is <section>. If you’re unsure, <section> is fine. For now, it’s plenty just to know that “the main content, too, can be divided into meaningful chunks.”

When you’re unsure which box to use

Now that we’ve collected a few box tags, let’s sort out how to choose between them. The trick is to work down the list from the top.

  1. Is there a dedicated tag that fits perfectly?—<header> for the top of the page, <nav> for a menu, <main> for the main content, <footer> for the bottom
  2. Is it a “meaningful chunk” you could give a heading to?—then <section> (or <article> if it stands on its own)
  3. None of those, just a box you want to decorate?—the last resort is <div>

“Think of meaningful tags first, and div dead last.” Just remember this order, and you won’t get lost choosing boxes.

CSSLine things up with FlexboxLining up these four rooms “side by side” and “centering” them—arranging them just as you want is the job of CSS layout, which comes much later in the course

Summary of this lesson

  1. <header>, <nav>, <main>, and <footer> are “meaningful boxes” that split a page by role
  2. <main> is one per page. Inside the main content, you can divide further with <section>
  3. Even though the look is the same as div, it’s kind to search engines and screen readers

Try it: the framework of Shima’s page

Let’s wrap Shima’s page, which we’ve been writing piece by piece, into boxes room by room. <header> (logo + menu) at the top, <main> in the middle, a <section> for each part, and <footer> at the bottom.

<body>
  <header>
    Shima
    <nav>
      <a href="#about">About Me</a>
      <a href="#likes">Favorites</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>Hi! I'm Shima. I love drawing, and on weekends I often go out for ramen.</p>
    </section>

    <section id="likes">
      <h2>Favorites</h2>
      <ul>
        <li>🎨 Drawing</li>
        <li>🍜 Ramen</li>
        <li>🎮 Games</li>
        <li>🐤 Shima</li>
      </ul>
    </section>

    <section id="contact">
      <h2>Contact</h2>
    </section>
  </main>

  <footer>
    <p>© 2026 Shima</p>
  </footer>
</body>

The “Contact” room with id="contact" is just a heading for now. Its content (a message form) will be added in a later chapter. The #contact link in the top menu now has a proper destination too.

The look hasn’t changed yet, but the page is now split into “header, main content, and footer” rooms. These “rooms” will turn into cards and side-by-side layouts in the CSS course.

FAQ

How do I choose between section and div?
If it's a 'meaningful chunk' that you could give a heading to, use section; if it has no meaning and is only a box for decorating with CSS, use div. Thinking 'can I give this box a heading?' makes it easier to choose.
What is the difference between section and article?
Both are meaningful chunks, but article is for something that stands on its own when cut out, like a single blog post or one news item. If you're unsure, section is fine.
Does nav have to go inside header?
There's no rule. The menu is often placed inside the header at the top of the page, but since nav is a tag that shows 'a collection of links,' it's fine to place it on the side of the page or in the footer.