21 May 2023

HTML Semantic & Non-semantic Tags

semantic tags
non-semantic tags
T
Written by

thatonevikash

Semantic and Non-semantic tags

Do you know? Every website you visit has one similarity.

Layout, they have layout.

For the entire website what data should be visible on the screen.

Should it contain? 🤔 A Header, A Hero and A Footer...

Gottcha: The layoutting technique comes into existence.

What is Layout?

In simple words layout is the organized HTML elements to build any website.

<body>
  <header>HEADER</header>
  <main>
    <section>HERO</section>
  </main>
  <footer>FOOTER</footer>
</body>

The above block is defining an website which has a Header, a Section within Main and a Footer. This organized tags are giving a clear understanding that the website contains three parts as header, footer & main.

Crucial role of Layout

You may create layout using semantic or non-semantic tags.

📌Important


Semantic tags are self explanatory tags and great for browser to identify.

Non-semantic tags are less explanatory tags and poor for browser to identify.

<body>
  <header>
    <h1>Docs.dev</h1>
    <ul>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </header>
  <main>
    <section>
      <h2>Hero section</h2>
      <p>This is hero section</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 | Docs.dev</p>
  </footer>
</body>

<body>
  <div>
    <h1>Docs.dev</h1>
    <ul>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
  <div>
    <div>
      <h2>Hero section</h2>
      <p>This is hero section</p>
    </div>
  </div>
  <div>
    <p>&copy; 2024 | Docs.dev</p>
  </div>
</body>
💡Tip

But the most important thing is your content, What you are offering. If your content is unique then your website will stand.

SEO will detect it. 😎

Written with 💖 by thatonevikash!