Semantic HTML

Semantic HTML refers to the use of HTML elements that carry meaning about the structure and content of the document, rather than just specifying how the content should be presented visually. Semantic HTML not only enhances the clarity of the code but also provides valuable information to both browsers and developers about the purpose and hierarchy of the content. Here are some commonly used semantic HTML elements:

1. <header>

The <header> element represents the introductory content of a section or page, often containing headings, navigation, logos, and other elements related to the overall content.

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

2. <nav>

The <nav> element represents a navigation menu, providing links to other pages or sections of the website.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

3. <main>

The <main> element contains the primary content of a document, excluding headers, footers, and navigation. It represents the main content area.

<main>
  <h2>Main Content</h2>
  <p>This is the main content of the page.</p>
  <!-- Additional sections, articles, etc. -->
</main>

4. <article>

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

<article>
  <h3>Article Title</h3>
  <p>Content of the article...</p>
</article>

5. <section>

The <section> element represents a thematic grouping of content within a document. It can be used to group related content together.

<section>
  <h2>Section Title</h2>
  <p>Content of the section...</p>
</section>

6. <aside>

The <aside> element represents content that is tangentially related to the content around it, often placed in a sidebar.

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="/related1">Related Page 1</a></li>
    <li><a href="/related2">Related Page 2</a></li>
  </ul>
</aside>

7. <footer>

The <footer> element represents the footer of a section or page, often containing copyright information, links, and other metadata.

<footer>
  <p>&copy; 2023 Example Company. All rights reserved.</p>
</footer>

Using semantic HTML elements enhances the accessibility and structure of a webpage, making it more understandable for both machines (like search engines) and developers. It also contributes to better SEO practices by providing clear information about the hierarchy and relevance of content. When creating web pages, consider the use of semantic elements to make your HTML more meaningful and semantically rich.