Semantic Structure

Semantic HTML

Semantic HTML uses meaningful tags that describe their purpose — not just their appearance. This helps search engines, screen readers, and developers understand the page structure.

You can further improve accessibility with ARIA attributes (Accessible Rich Internet Applications). For example, aria-label provides a text label for screen readers, and role explicitly declares an element's purpose:

<nav aria-label="Main navigation">...</nav>
<div role="alert">Form submitted!</div>

Use ARIA only when native semantic elements are not sufficient — a <button> already has an implicit role, so adding role="button" to it is redundant.

Key semantic elements:

<header>   <!-- Site header, logo, navigation -->
<nav>      <!-- Navigation links -->
<main>     <!-- Main page content (use once per page) -->
<section>  <!-- Thematic group of content -->
<article>  <!-- Self-contained content (blog post, news article) -->
<aside>    <!-- Sidebar, related content -->
<footer>   <!-- Site footer -->

A typical page structure:

<header>
  <h1>My Site</h1>
</header>
<main>
  <section>
    <h2>About</h2>
    <p>Welcome!</p>
  </section>
</main>
<footer>
  <p>© 2024</p>
</footer>

Your Task

Create a page with <header>, <main>, <section>, and <footer> elements.