Stage 2 -- Semantic Sections

Wrap the page content in meaningful HTML elements so the structure is clear to browsers, screen readers, and search engines.

What You'll Learn

• The <header> element for introductory content
• The <main> element for the primary page content
• The <section> element for grouping related content
• Why semantic elements matter for accessibility

Prerequisites

Complete Stage 1 -- Header & Intro. You should have index.html with an <h1> heading and a <p> tagline.

What Changes

One file is modified: index.html. The existing heading and paragraph are wrapped in a <header>. A <main> element is added with three <section> elements, each containing an <h2> for a menu category.

Outcome

Open index.html in your browser. You see the same heading and tagline from Stage 1, plus three new section headings: "Classic Burgers," "Specialty Burgers," and "Sides." The page looks simple, but the HTML is now organized with semantic elements that describe the purpose of each part.