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