Project 2: Blog Layout

HTML Masterclass

Builds on these lessons

Common Tags Text Formatting Advanced Tags Semantic Tags Semantic Tags List Intro Semantic Tags Div Span Character Encoding Meta Tag Head Meta

Step 1 of 4

Project

Semantic Sectioning

Structure this blog with semantic sectioning tags instead of generic <div>s: a <header> for the site title, a <nav> for site links, an empty <main> where the article will go, an <aside> for a sidebar, and a <footer>. Each tag tells the browser — and assistive tech — what role that region plays, something a plain <div> never communicates.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slow Coffee | A Web Dev Blog</title>
</head>
<body>
  <header>
    <h1>Slow Coffee</h1>
  </header>
  <nav>
    <a href="/">Home</a>
    <a href="/archive">Archive</a>
  </nav>
  <main>
  </main>
  <aside>
  </aside>
  <footer>
  </footer>
</body>
</html>

← Previous Next →