HTML5

Semantic Elements

Structure a page with header, nav, main, article, and footer.

#semantic#structure

Code

html5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic Page</title>
</head>
<body>
  <header>
    <h1>Site Title</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Post Title</h2>
      <p>Article body...</p>
      <section>
        <h3>Comments</h3>
      </section>
    </article>
    <aside>Related links</aside>
  </main>

  <footer>&copy; 2024 Example</footer>
</body>
</html>

All snippets