Semantic HTML

What is Semantics?

In Programming world semantics refers to the meaning of a piece of code.

Why do we need semantic HTML ?

semantic HTML tags makes your HTML readable.
It increases accessibility of your website, also makes it easier for screen readers to read your code .

Screen readers are used for assisting visually challenged people to access your website
Semantic elements improve code structure and make your code more readable.
Improves the SEO positioning of your website.

Example of non semantic elements <div> and <span> These tags does not mean anything.

Example of semantic elements <form> ,<nav>,<section> These tags clearly defines the content.

Example

Semantic HTML

  <article>
  <h1>This is a heading of this article </h1>
  <p>This is the description of the heading</p>
  </article>

non semantic HTML

  <div class="article">
  <span style="font-size: 32px; margin: 21px 0;">This is a heading of this article</span>
  <p>This is the description of the header</p>
  </div>

These Two codes when it is displayed on the browser they give the same appearance but, the semantic code is readable and accessible than the non-semantic code.

Some useful Semantic HTML tags:

<header> It is a container for heading ,Introductory content and group of navigational aids.
<section> Represents a section of a document.
<article> contains independent content like a typical blog.
<footer> contains information about the author , copyright data or links to related documents.
<table> contains data in the form of tables.
<nav> contains a group of navigational links for easy navigation.
<main> contains the important content of the document.

If you want read and explore more about semantic HTML tags refer:

Thank You 🤝 for reading

Let's connect