← Week 3
DESN 368

Wk 3 โ€” In Class: Semantics Practice

Web Design Fundamentals ยท Spring 2026

In-Class Activity Required

Assignment Overview

This page for Acme Supply's website is built entirely with <div> tags. Your job: replace each <div> with the correct semantic HTML element. The page should look exactly the same when you're done โ€” semantic HTML changes meaning, not appearance.

Reference

Read through this guide on semantic tags before starting:

HTML Semantic Tags โ€” CodeWithHarry

Get Started

Fork this CodePen and complete the challenge directly in the editor:

Open in CodePen

Click "Fork" in CodePen to create your own copy before editing.

Requirements

Ensure that each section of the website is wrapped in the appropriate semantic HTML elements:

  • <header>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <footer>

Submission

Submit the link to your forked CodePen.