Checkpoint 1.1 · HTML Structure

Laying the Foundation

What I Built

A fully structured HTML portfolio skeleton with semantic elements throughout — no CSS, no JavaScript, just clean markup. Every page had a proper <header>, <nav>, <main>, and <footer>. Headings followed a strict hierarchy starting with a single <h1>. The nav linked all pages together.

What I Learned

Semantic HTML isn't just about how it looks — it communicates meaning to browsers, search engines, and screen readers.
A page should have exactly one <h1>. I had three at first. That matters for accessibility.
The difference between <div> and <section> and <article> is about semantics, not layout.
Git staging area confused me for a full hour. git add then git commit — now it makes sense.

Code highlight — semantic page structure

<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="projects.html">Projects</a>
    </nav>
  </header>
  <main id="main-content">
    <h1>Alex Chen — Web Developer</h1>
    <section aria-labelledby="about-heading">
      <h2 id="about-heading">About Me</h2>
      <p>...</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2026 Alex Chen</p>
  </footer>
</body>

Challenge & Fix

Problem: I kept writing <div class="nav"> out of habit from tutorials. My tutor pointed out that <nav> exists for exactly this reason — divs with class names are invisible to assistive technology.

Fix: Replaced all structural divs with the correct semantic element. Added aria-label attributes where there were multiple nav landmarks on the page.

Skills Gained

HTML5 Semantic elements Heading hierarchy ARIA landmarks Git basics GitHub