I am not a biology teacher. But I know what is inside the HTML head elements. The common HTML head element has the following meta tags:
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
I care about little stuff. Those three lines of code are taken for granted, but nobody questions the reason for having them. Whether you are a new developer or an experienced developer, now is a good time to learn—or relearn—the basics so that when people ask you, you can answer them.
Many developers are unsure how to explain those lines of code. They take it for granted. In fact, I have never seen a tutor who covers clearly those three lines of code. Thus, you need to know about that so that you understand what you are writing.
Converting characters into something understandable
The <meta charset="UTF-8" /> is used for computers to format letters according to a standard. In this case, the standard that we choose is the UTF-8 standard. It is the most popular standard. I do not know any other character encoding standards. But we do not need to know other standards because UTF-8 works well, and knowing them does not help us anyway.
Now you can delete the HTML meta tag, and your website will work fine because all browsers use UTF-8 as their default character encoding standard.
But what is encoding? Encoding is a process of converting human-readable information into computer code. Think of the process like a translator. For example, if you speak English and I speak Japanese, we need a translator to help us understand each other. In the computer world, a computer does not understand human language, and humans do not understand computer language. For a computer and a human to interact, they need a translator to help them communicate. This is what a character encoding means: to translate human-readable information into a language that computers can understand.
Decoding is the opposite. It means a process to convert computer language into human language. The HTML code is the human language. Thus, we do not need a character decoding inside the HTML head.
Making your website responsive with a single line of code
The meta viewport tag is essential for making a responsive website. You may think that your awesome CSS makes your website responsive. But the truth is, both your great CSS and the meta viewport tag make it happen. Thus, you must keep the meta viewport tag in every HTML page. Otherwise, your website will not be responsive and will become an ugly website.
The default meta viewport tag that comes from an Emmet abbreviation—type bang, !, and boom—is the best and the purest meta viewport that you can have. If you change the initial scale into something else, you destroy it. If you add more text—like user-scalable=no—to the content attribute, you ruin your website. Keep your meta viewport tag simple. Then, you are on your way to making a great website.
Giving a name for your page
The HTML title tag is not there to write a clickbait title. It gives your page a name. This way, your users know where they are on your website.
But some people may say, "Our users can see our website, so they do not need to see the title. Moreover, the title is in the browser's tab. Nothing shows up in the real page." Well, they think their users always have their website open, and that is a big mistake. For example, I am a front-end developer, and when I develop a website, I often open many tabs to find an answer. If I open 20 tabs and I want to go back to a specific tab, I need to rely on the browser's tab and the title of the website. This means the content between the <title> markup is a part of web accessibility. You need to write your title correctly.
If your page title is "Document," you had better fix that right now.
Summarizing what is in the head
- The meta charset can be removed if you want.
- The meta charset is used for the computer to convert human language into computer language.
- The meta viewport tag is essential to make every page responsive.
- Do not add more content to the meta viewport tag.
- Give your page a descriptive title so that your users know where they are on your website.