Document Skeleton and Semantic Sections

Practice the page landmarks used in modern HTML: header, main, section, article, and footer.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<header>
  <h1>Welcome</h1>
  <p>Write semantic HTML here.</p>
</header>
<main>
  <section>
    <article>
      <h2>Lesson content</h2>
      <p>Replace this text with your own structure.</p>
    </article>
  </section>
</main>

body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
  line-height: 1.6;
}

console.log("Semantic structure loaded");