CodeToLive

HTML Semantic Elements

Semantic elements clearly describe their meaning to both the browser and the developer. They make the structure of a web page more meaningful and accessible.

Why Use Semantic Elements?

• Accessibility: Improves screen reader navigation.
• SEO: Helps search engines understand the content.
• Readability: Makes the code easier to understand and maintain.

Common Semantic Elements

• <header>: Represents the header of a document or section.
• <nav>: Represents a section of navigation links.
• <main>: Represents the main content of the document.
• <article>: Represents a self-contained piece of content.
• <section>: Represents a standalone section of content.
• <footer>: Represents the footer of a document or section.

Example: Semantic HTML Structure

<header>
  <h1>Website Title</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>This is the content of the article.</p>
  </article>

  <section>
    <h2>Section Title</h2>
    <p>This is a standalone section.</p>
  </section>
</main>

<footer>
  <p>© 2025 CodeToLive</p>
</footer>
      

Non-Semantic Elements

Non-semantic elements like <div> and <span> do not convey any meaning about their content. They are often used for styling purposes.

<div class="container">
  <span class="highlight">This is a non-semantic example.</span>
</div>