Semantic HTML (Hypertext Mark-up Language) is the appropriate use of HTML to give meaning to content on a web page rather than just displaying it.
Semantically correct Mark-up helps the browser understand the web content. This clarification helps the browser communicate with search engines to deliver the right pages for right queries.
Example:
Semantic HTML:
Output:
Non-semantic HTML :
Input
Output:
In the example above, both blocks give the elements the same way visually.
But block 1 adds the content understood by the browser:
• Appropriate element (<h5>) is used for the heading (Versions of HTML) instead of (<b>) which holds no relevance.
• The paragraph (There are 8 versions of HTML) is represented by (<p>).
• (<li>) and (<ul>) are used for the list instead of bullet image (<img scr=”o.jpg>) and line breaks (<br>).
Importance of Semantic HTML
1 . Accessibility: It’s structure, makes it easier for search engines to find the webpage. Increasing the SEO (Search Engine Optimization) of a web page.
2 . It’s easier to read: Semantic HTML, makes it easier for other developers to read and understand the web content. Explaining the type of information the tag is supposed to contain.
