Document Skeleton and Semantic Sections

Start every page with a predictable structure: header, main, section, article, and footer. The goal is not decoration. It is a page that remains easy to read, easy to style, and easy to maintain.

Use this lesson to practice choosing the right element for the right job and to understand how semantic markup helps both accessibility and future editing.

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

<header class="page-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;
}
.page-header {
   margin-bottom: 1.5rem; 
   padding-bottom: 1rem;
   border-bottom: 1px solid #d7d7d7;
}

// HTML-only lesson.\nconsole.log("Semantic structure loaded");