Semantic tags and non-semantic tags refer to how HTML elements are used and how clearly they convey the meaning of the content they contain.

1. Semantic Tags

Semantic tags clearly describe their meaning both to the browser and to developers. They give meaning to the content inside them, which helps with both accessibility and SEO (Search Engine Optimization). They also help search engines and assistive technologies (like screen readers) understand the page structure and content.

Common Semantic Tags:

<header>: Defines the header section of a webpage or a section.
<nav>: Defines navigation links.
<main>: Represents the main content of a document.
<section>: Defines a section of content.
<article>: Represents an independent piece of content like a blog post.
<aside>: Defines content related to the main content, like sidebars.
<footer>: Represents the footer of a document or section.
<figure>: Represents a unit of content, like an image with a caption.
<figcaption>: Provides a caption for the <figure> element.

<header>
    <h1>Welcome to My Website</h1>
    <nav>
      <a href="#home">Home</a> |
      <a href="#about">About</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Blog Post Title</h2>
      <p>This is the main content of the blog post.</p>
    </article>
  </main>

  <footer>
    <p>© 2024 My Website</p>
  </footer>

In this example, the <header>, <nav>, <article>, <main>, and <footer> tags give meaning to the content and define the structure of the webpage.

2. Non-Semantic Tags

Non-semantic tags do not give any clear meaning to the content they contain. They are more generic, and typically used for styling and layout purposes. These tags do not communicate the structure or purpose of the content to the browser, search engines, or assistive technologies.

Common Non-Semantic Tags:

<div>: A block-level container that holds other elements without adding any meaning to the content.
<span>: An inline container for text or other inline elements without adding any meaning.

Example:

<div class="header">
    <h1>Welcome to My Website</h1>
    <div class="nav">
      <a href="#home">Home</a> |
      <a href="#about">About</a> |
      <a href="#contact">Contact</a>
    </div>
  </div>

  <div class="content">
    <div class="post">
      <h2>Blog Post Title</h2>
      <p>This is the main content of the blog post.</p>
    </div>
  </div>

In this example, the <div> elements are used as generic containers but do not provide any specific meaning about the content.

Summary:

Semantic tags should be used whenever possible, as they enhance the clarity and structure of the webpage for both developers and machines (browsers, search engines, screen readers).
Non-semantic tags like <div> and <span> are useful when you need generic containers for styling but don't need to define any specific meaning for the content.

Semantic vs Non-Semantic Tags in HTML