Skip to content
\n","url":"https://ez4code.com/snippets/html5-semantic-elements","keywords":"semantic, structure","author":{"@type":"Person","name":"EZ4Code Team"},"publisher":{"@type":"Organization","name":"EZ4Code","logo":{"@type":"ImageObject","url":"https://ez4code.com/logo.png"}},"datePublished":"2024-01-01","dateModified":"2026-08-01","image":"https://ez4code.com/og-image.png"}
HTML5

Semantic Elements

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

By EZ4Code Team
semanticstructure

Code

<!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>

Explanation

Semantic elements describe their meaning to browsers and assistive technologies. header, nav, main, article, section, aside, and footer map a page's structure so screen readers can navigate logically. They also improve SEO and code readability over generic divs.

More HTML5 Snippets

Form Input Types

Use native HTML5 input types, validation, and datalist.

Canvas Basics

Draw shapes, lines, and text on a 2D canvas.

Video & Audio

Embed media with multiple sources and control playback.

Local & Session Storage

Persist data in the browser with the Web Storage API.

Geolocation

Get the user's position and watch for changes.

Drag and Drop

Accept dropped files with the Drag and Drop API.