HTML Part 5: Structure a whole page

You know the pieces now, so let's build a complete page, with tags that say what each area of it is for.

div and span

<div> is a box for grouping things, and <span> wraps a few words inside a line. Neither means anything on its own. They're there so you can group things and style them with CSS.

<div class="card">  <p>Price: <span class="price">Rs 499</span></p></div>

Tags with a job

For the big areas of a page, HTML has tags that describe what they're for:

• <header>: the top of the page, usually the logo and menu
• <nav>: a group of main links
• <main>: the main content. Only one per page.
• <section>: a part of the page about one topic, usually with its own heading
• <article>: something that makes sense on its own, like a blog post or a product card
• <aside>: side content, like related links
• <footer>: the bottom of the page

They look exactly like a <div> until you style them. The difference is meaning. A screen reader can jump straight to <main> or <nav>, search engines understand the page better, and when you open your code again in three months, <nav> tells you a lot more than <div class="thing">.

class and id

Both are attributes you can put on any element:

• id names one element. Each id can appear only once on a page.
• class names a group. Many elements can share a class, and one element can have several: class="card featured".

CSS uses them to pick what to style, and JavaScript uses them to find elements. You'll use classes far more than ids.

A whole page

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Ravi Kumar</title></head><body>  <header>    <h1>Ravi Kumar</h1>    <nav>      <a href="#projects">Projects</a>      <a href="#contact">Contact</a>    </nav>  </header>
  <main>    <section id="about">      <h2>About me</h2>      <p>Second year B.Tech student. I like building small tools.</p>    </section>
    <section id="projects">      <h2>Projects</h2>      <div class="projects">        <article class="card">          <h3>Bus timings</h3>          <p>Shows the next bus from my college gate.</p>        </article>        <article class="card">          <h3>Bill splitter</h3>          <p>Splits a group bill, down to the last rupee.</p>        </article>      </div>    </section>
    <section id="contact">      <h2>Contact</h2>      <p><a href="mailto:ravi@example.com">ravi@example.com</a></p>    </section>  </main>
  <footer>    <p>Made by Ravi, 2026</p>  </footer></body></html>

The <div class="projects"> around the cards is there for the CSS series, which lays them out as a grid.

It looks plain in a browser, and that's fine. The structure is done, and CSS will take care of the looks.

Check your HTML

Paste your code into validator.w3.org, on its "Validate by Direct Input" tab. It points out unclosed tags, repeated ids and other mistakes the browser quietly forgives. Make it a habit before you move on.

Try it

Build your own version of this page with your real projects, even the small ones. You'll style this same page in the CSS series, so keep the file.

Next: CSS Part 1: How CSS styles a page