Table of contents
The literal meaning of semantics is the study or science of meaning in language. Semantics in programming means a piece of code. We all know that HTML constructs the structure of the webpage. Since HTML is the structure of the webpage, it's very crucial to maintain the page structure.
The HTML document contains the head and body tag and inside the body tag, all the content of the website is written. Like, if we have to create a heading in the webpage we have to write the text inside the h1 or h2 tag.
Even though we can change the look of any tag using CSS, the HTML is not for its default browser looks, but we write the HTML in that way so the browser and the crawlers or Google bots can also understand the significance of the content.
Bad Practice
Many developers create the whole website using the <div> tags one example is shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image</title>
</head>
<body>
<div>This is a header.</div>
<div>This is a navigation section.</div>
<div>This is a section.</div>
<div>This is a footer.</div>
</body>
</html>
Output:
In the above example, we have seen that the <div> tag is used for everything from header to footer, that is not a good practice.
Good Practice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image</title>
</head>
<body>
<div>This is a header.</div>
<nav>This is a navigation section.</nav>
<section>This is a section.</section>
<footer>This is a footer.</footer>
</body>
</html>
Output:
These changes in the code are not visible to the user, we can see that the page looks exactly like before, but for the web crawlers, these change helps a lot.
It is always recommended to follow semantic markup, following semantic markup helps in SEO and it also helps in accessibility for disabled users. Using the semantics screen readers can easily identify the different portions of the webpage and will be more accessible.
There are many semantic elements, we can explore in MDN documentation.
Explore... and Good Luck.