The term "Semantic" is used to describe the practice of expressing something in a meaningful way. In the context of coding or programming, semantic code refers to code that is written in a way that accurately conveys its intended meaning to the developers who read it.

Likewise, semantic HTML code conveys its intended meaning to the developer, browser, and search engine, rather than just focusing on visual appearance. Semantic HTML plays a vital role in ranking websites because it helps search engines understand the content and structure of a web page. That's why it helps to improve its visibility and relevance in the search results.

<header> : Header

The "<header>" tag is used to markup the uppermost section of a website. It typically includes branding elements like logos, navigation links, and other introductory content such as contact information, search forms, and social icons. This section separates the essential elements from the main content of the site.

Let's look at the difference between Semantic and No-Semantic Header

<!-- Non-semantic Header -->
<div class="header">
    <h1>Blog Site</h1>
    <img src="logo.png" alt="Blog Site Logo">

    <div>
        <a href="#">Home</a>
        <a href="#">About</a>
    </div>

    <a href="#">Sign In</a>
</div>

<!-- Semantic Header -->
<header>
    <div class="brand">
        <h1>Blog Site</h1>
        <img src="logo.png" alt="Blog Site Logo">
    </div>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>

    <div class="account">
        <a href="#">Sign In</a>
    </div>
</header>

<navigation> : Navigation

The "<nav>" tag is specifically used to indicate the navigation section of a website. It is very important for SEO because search engines examine the navigation to discover other pages on the website. Additionally, the "<nav>" tag helps assistive technologies, such as screen readers, to identify the navigation section.

Let's see an example of Semantic Navigation

<!-- Non-semantic navigation -->
<div class="navigation">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

<!-- Semantic navigation -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<main> : Main

The "<main>" tag is used to wrap the main content of a web page. It helps to convey the main purpose of the page to the Search Engine.

<!-- Non-semantic main content -->
<div>
  <p>Our Vision</p>
  <p>We are a company with a vision of proving quality content.</p>
</div>

<!-- Semantic main content -->
<main>
  <h1>Our Vision</h1>
  <p>We are a company with a vision of proving quality content.</p>
</main>

<section> : Section

The "<section> " is used to break down a large content into several portions. For instance, dividing a product page into different parts.

<!-- Non-semantic Section -->
<div>
    <h2>About Us</h2>
    <p>All the content goes here</p>
</div>

<!-- Semantic Section -->
<section>
    <h2>Our Vision</h2>
    <p>Some content goes here</p>
</section>
<section>
    <h2>Our Mission</h2>
    <p>Some other content goes here</p>
</section>

<article> : Article

The "<article>" tag is used to represent an independent content of a website. It can be a blog post, article, or any other content which is independent and self-contained.

<!-- Non-Semantic article -->
<div class="article">
  <h2>Top 5 VS Code extensions that should have been installed on every developer's machine</h2>
  <p>The reason VS Code is so popular is its widely available extentions</p>
</div>

<!-- Semantic article -->
<article>
  <h2>Top 5 VS Code extensions that should have been installed on every developer's machine</h2>
  <p>The reason VS Code is so popular is its widely available extentions</p>
</article>

<aside> : Aside

The "<aside> " tag is used to wrap the content that is indirectly related to the surrounding content. It is frequently used for the sidebar of a website in which we can place related content to the main or some other correlated content. It is also widely used to place Adds inside it.

<div>
    <aside>
        <h3>Related Articles</h3>
        <ul>
            <li><a href="#">Article 1</a></li>
            <li><a href="#">Article 2</a></li>
            <li><a href="#">Article 3</a></li>
        </ul>
    </aside>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here</p>
    </article>
</div>

<footer> : Footer

The "<footer> " tag in HTML is used to wrap the bottom-most section of a website. This may include things such as links to other pages, links to the socials profile, copywriting information, and contact information.

<!-- Non-semantic footer -->
<div class="footer">
  <p>&copy; 2021 My Site</p>
</div>

<!-- Semantic footer -->
<footer>
  <p>&copy; 2023 My Site</p>
</footer>

<details> , <summary> : Details and Summary

The "<details>" and the <summary> tags are used together to represent a collapsible section of a web page. Whereas the <details> tag is used as a parent wrapper <summary> and the <summary> tag is used inside as a child to represent the summary or the title of the main content.

<--- Non-semantic HTML --->
<div>
  <p>Some portion of the content goes here. Click to expand</summary>
  <p>Main content goes here</p>
</div>

<--- Semantic HTML --->
<details>
  <summary>Some portion of the content goes here. Click to expand</summary>
  <p>Main content goes here</p>
</details>

Figure & Figcaption : <figure> , <figcaption>

The HTML tag "<figure> " and "<figcaption>" are used together to represent visual content. It can be a reference to another content or a stand-alone content. The <figure> is used to wrap the visual content such as images, diagrams, and charts, and the <figcaption> is used to wrap the caption of the content.

<-- Non-semantic HTML
<div>
    <img src="image.jpg" alt="Image description" />
    <p>Image caption</figcaption>
</div>

<--- Semantic HTML --->
<figure>
    <img src="image.jpg" alt="Image description" />
    <figcaption>Image caption</figcaption>
</figure>

<mark> : Mark

The "<mark> " tag is used to highlight important text. It can contain any kind of text that is intended to be highlighted.

<p>Shamim is proficient in <mark>Web Design</mark> and <mark>Web Development text.</p>

<time> : Time

The "<time> " tag is pretty much self-explanatory. It is used to mark up specific dates, times, or duration. This semantic tag helps search engines easily detect the time duration and present the content as search results in a relevant period.

<p>The shop open from <time>09:00</time> to <time>06:00</time> every weekday.</p>

<div> & <span> : Div and Span

The "<div> " and the "<span>" are the two fundamental elements of HTML but these have no semantic meaning. These are used to mark up generic content areas.