When it comes to writing HTML, I like to think of it as describing the content that's on my page in the best way possible rather than adhering to some sort of standard.
This is where semantic HTML comes into play. To put it plainly, semantic HTML relies on the use of specific tags like main, section, etc. rather than div. Search engines and search crawlers LOVE when you use semantic HTML because it helps them better understand the content that's on your website, influencing your search rankings.
In this tip, I'll introduce you to three semantic tags you should always use on your pages: main, header, and footer.
Let's look at a basic example of an HTML page's structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
...
</body>
</html>We can augment this by including the three semantic tags we mentioned previously:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
...
</nav>
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
</html>
In essence, main should wrap around your pages content and exclude the page's header/navbar and its footer. Conversely, header and footer should define your page's header/navbar and footer respectively.
There are a lot more semantic tags you can and should be using to better describe your pages content, I'll get around to them in future blog posts!
