What is Semantic HTML?

In programming Semantic means a piece of Code. Semantic HTML code that uses HTML tags to effectively describe the purpose of page elements. Semantic HTML code communicates the meaning of elements which For Example What purpose or role does that HTML element have.

• Semantic HTML = Element with a meaning

Semantic Element describes clearly the meaning of element to both browser and developer.

• Example of a non-semantic element div and span element is not describing their work or which purpose they are using
• Example of a semantic element nav, table,aside these elements are clearly described why these elements are going to be used.

  The elements mentioned above are just for example there so many semantic elements are available to define different parts of web pages.

Some semantic elements in HTML we can use to make our web page more readable

• aside
• nav
• header
• footer
• h1 ,h2,h3.. etc
• main
• article
• figure
• summary
• button
• ol
• ul
• img

Here we can see some examples for a better understanding and difference between a normal element and a semantic element

Semantic element

• These elements have meaning.
• They describe how the content within them is supposed to behave.
• Semantic HTML code communicates the meaning of elements to both computers and humans.

Here is a basic example :

p tag : p(paragraph )tag is semantic HTML where we can write a paragraph using this take it is blocked element. All contain between this opening and closing tag. anyone or any device reading this tag will understand its purpose.

<article> 
         <h1>This is simple example for heading tag</h1> 
         <p>This is normal sentence to understand how p tag is helpfull</p> 
      </article>

Here is one code snippet I have taken two tags one is the p tag and another one is the h1 tag these tags are clearly defining which purpose they have been used

Normal HTML

• they don't have meaning
• they can contain anything
• class attribute can be used to work with their structure.

here is some example of normal HTML

• span
• div

<div>
        <span>Example for normal HTML </span>
      this is div tag
    </div>

here we can see these tags are not defining why and what purpose the tags are used, it is difficult to understand the work of these tags even though they gave the same output but no one can recognize the work by seeing it.

so for the systematic and readable code, we must use semantic HTML.

Conclusion :

This is a small description of semantic HTML hope this is useful. Semantic markup is one such practice — it makes your code more readable, more search-engine-friendly, and more accessible to assistive technologies.