Skip to main content

Semantic HTML

Let’s make your pages meaningful! Semantic HTML uses tags that describe their purpose, making your code easier to read and better for accessibility and SEO.

Common Semantic Elements​

  • <header>: Top of the page or section
  • <nav>: Navigation links
  • <main>: Main content
  • <section>: Thematic grouping
  • <article>: Independent content
  • <footer>: Bottom of the page or section

Example:

<header>
  <h1>My Blog</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>
<main>
  <article>
    <h2>First Post</h2>
    <p>Hello world!</p>
  </article>
</main>
<footer>
  &copy; 2024 My Blog
</footer>
tip

Semantic tags help with accessibility and SEO. Use them whenever possible!

What's Next?​

Let’s add media to your pages: Media (Images, Audio, Video, Iframes).