Headings
We all know what the h1, h2, h3, .. tags do which is that h1 is the biggest and subsequently the size decreases as we go towards h4, h5. But we can increase the size by CSS also so what's the purpose of declaring h1, h2, and so on? But in reality, it's not like that, there is a purpose behind it.
See, HTML is a markup language, but you should see it as a structural language, a simple declarative language that creates the basic structure of the website. There are other structural languages as well, like Latex, Markdown, etc., but HTML is the most popular language accepted by every browser.
Returning to h1 tags, these tags define the hierarchy of the content. The H1 tag defines that it is the most important heading of the webpage. Similarly, in the footer when we write the address, we use the footer and then use a paragraph tag for the address, but we can use the address tag to give our address without having much. And it is best practice to do as per Google and SEO purposes, and Google will know where to look whenever any query comes for the address.
Meta tags
<!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>HTML site</title>
</head>
<body>
<h1>heading</h1>
</body>
</html>
So, let's see what the important tags are. The first one is doctype defining its HTML doc type as <!DOCTYPE html>. Then we declare the language of the website for example, en for English, hi for Hindi, and so on.
Now comes the meta tags.
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
These are the things that we do not want to write on our webpage but any server or bot should know this information about the page. For example, if you want to support emojis on your web page, you should use Utf-16. Then comes the name content and viewport, which defines what is the zoom level on different screens. To know about these in detail, we can read more about them here:
Also, there is a shortcut in Emmet. If we just type meta: we will get all tags suggested because of Emmet.
If we notice, till now, all the tags are opened and then closed. It is best practice to close the tags. If we don't give a closing tag, then also the webpage will run without a closing tag, but it's not a proper way to use it and will play a crucial role when we use React. Also, there can be attributes of these tags as well which we can see here as lang is an attribute.
Now in the next blog, we will discuss more body meta tags. I hope you learned something from the blog.
