Project 8: Semantic Portfolio Layout

Project 8: Semantic Portfolio Layout

Now structure matters. Build a layout that uses meaning, not "div soup".

The goal

A page with: <header>, <nav>, <main>, <article>, <aside>, and <footer>.

Skeleton

<header>
  <h1>My Portfolio</h1>
  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
  </nav>
</header>

<main>
  <article id="about">
    <h2>About me</h2>
    <p>Who I am and what I love building.</p>
  </article>

  <article id="work">
    <h2>Projects</h2>
    <p>Three projects with screenshots.</p>
  </article>

  <aside>
    <h2>Skills</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </aside>
</main>

<footer>
  <p>Made with &lt;3 and HTML.</p>
</footer>

The rules of semantic HTML

• The heading hierarchy starts at <h1>: only one per page.
• <nav> is for navigation links; <main> is the primary content.
• Landmarks help assistive technology jump around the page instantly.
• Use entities for special characters: < and &.

Checklist

• [ ] Exactly one <main>
• [ ] Header with a nav
• [ ] At least one <article> and an <aside>
• [ ] A footer
• [ ] One <h1> only

TL;DR

Semantic layout = landmarks (header/main/footer) + real content (article, aside). Accessibility and readability win.