HTML5 semantic elements (header, nav, section, article, etc.)

HTML5 introduced a set of semantic elements that provide meaning and structure to web documents. These elements help developers create more accessible and SEO-friendly websites by properly defining the content’s purpose and relationships. Here are some of the most commonly used HTML5 semantic elements:

1. <header>: The <header> element represents the introductory content at the top of a section or page. It typically includes the site’s logo, navigation, and other header-related elements.

Example:

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <!-- Navigation links go here -->
  </nav>
</header>

2. <nav>: The <nav> element represents a section of a page that contains navigation links, either for the website or a specific section of the site.

Example:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

3. <section>: The <section> element defines a thematic grouping of content on a webpage. It can be used to split the content into distinct sections.

Example:

<section>
  <h2>Section Heading</h2>
  <p>Content goes here...</p>
</section>

4. <article>: The <article> element represents a self-contained piece of content that could be distributed and reused independently, such as a blog post, news article, or forum post.

Example:

<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>

5. <main>: The <main> element represents the main content of the document. It should not include content that is repeated across multiple pages, such as headers or footers.

Example:

<main>
  <!-- Main content goes here -->
</main>

6. <footer>: The <footer> element represents the footer of a section or page. It often contains copyright information, contact details, and other relevant information.

Example:

<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

7. <aside>: The <aside> element represents content that is tangentially related to the content around it. It is often used for sidebars or content like advertisements.

Example:

<aside>
  <h3>Advertisement</h3>
  <!-- Ad content goes here -->
</aside>

Using these semantic elements properly not only makes your code more organized and readable but also helps search engines and screen readers better understand your page’s structure and content.