What is Semantic HTML?

Recently, I have learnt about semantic html, It is really important to all web developer to know about it. We all love to use <div> and we used so many <div> tags. It works fine with <div> but there are some problems:
- Meaningless: it tells nothing about its content
- Accessibility: it doesn't make any useful info about the structure of the document
- Readability: to understand the code, we need to read the each an every class name

Example of Semantic elements: <header>, <main>, <nav>, <section>, <article>

Example of Non semantic elements: <div>, <span>

Semantic HTML is HTML that introduces meaning to the web page rather than just presentation. For example, a <h1> tag indicates that the enclosed most important header text and <p> tag indicates the text is a paragraph.

Why semantic html?

semantic element clearly describes its meaning to both the browser and the developer. By adding semantic tags to your document, you provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.

Semantic layout

<!DOCTYPE html> 
<html> 
<head>
  <meta charset="utf-8" />
  <title>Title</title>
  <link href="stylesheets/style.css" rel="stylesheet" />
</head>
<body>
  <header>
    <img src="logo.png" alt="logo"> 
    <nav>
      <ul>
        <li><a href="#">Menu Option 1</a></li>         
        <li><a href="#">Menu Option 2</a></li> 
      </ul>
    </nav>
  </header> 
  <main>
  <section> 
    <article>
      <header>
        <h1>Article #1</h1>
      </header>
      <section> 
        This is the first article. 
      </section>
    </article> 
    <article>
      <header>
        <h1>Article #2</h1>
      </header>
      <section> 
        This is the second article. 
      </section> 
     </article> 
   </section> 
   <aside> 
     <figure>
       <img width="100px" height="100px" src="image.jpg" alt="square" /> 
       <figcaption>square</figcaption>
     </figure> 
   </aside> 
  </main>
  <footer>Footer</footer> 
</body>
</html>