HTML

Build Your First Page

You've now met headings, paragraphs, links, images, lists, tables, forms, and semantic tags. This capstone example combines several of them into one small, realistic page — a personal portfolio — so you can see how they actually work together rather than in isolation.

What to notice as you read this

The page uses exactly one <h1> (the name), semantic <header>/<main>/<footer> sections instead of unlabeled <div>s, a real <ul> for the project list since order doesn't matter there, and a labelled form input rather than bare placeholder text. Every choice traces back to a lesson you've already read — that's deliberate: real pages are built by combining a small number of well-understood pieces, not by learning some separate "how to build a whole page" trick.

Edit the example freely and see what breaks — nothing will, it's a sandbox. From here, our tutors' full HTML/CSS course goes further: real layouts, styling every element you've just learned, and building complete, responsive pages.

<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>

  <header>
    <h1>Ada Okafor</h1>
    <p><em>Frontend developer in training</em></p>
  </header>

  <main>
    <h2>Projects</h2>
    <ul>
      <li><a href="#">To-do list app</a></li>
      <li><a href="#">Weather widget</a></li>
    </ul>

    <h2>Contact</h2>
    <form>
      <label for="email">Email me:</label>
      <input type="text" id="email" name="email">
      <button type="submit">Send</button>
    </form>
  </main>

  <footer>
    <p>&copy; 2026 Ada Okafor</p>
  </footer>

</body>
</html>

← Semantic HTML

Build Your First Page

What to notice as you read this

Cookie preferences

Strictly necessary

Analytics

Marketing