HTML Head and Metadata

HTML head is the part of an HTML document that never actually shows up on a webpage. Why then, do we make an effort to write it? Well, the job of the <head> tag is not to display stuff on the screen, but to serve the metadata about the webpage.
What is metadata, you ask? Well, metadata is data about the data. It is the data that describes what the data being served actually contains. It is usually not meant for humans though. The <head> tag contains information that helps machines understand what a webpage contains. We will talk about it soon.

Lets go by the most used tags inside HTML head tag-

<title>- The <title> tag is probably among the top five most well-known tags of an HTML page. It contains the text that is displayed on the tab as the name of the page. It is also the text that shows up as the name when we bookmark a tab in our browsers.
<link>- This is the tag we use to link our CSS styles to our webpages.
For example-
<link rel="stylesheet" href="my-css-file.css">
<script>- The tag to link the all-encompassing javascript files to our webpages. This tag however comes with a catch. We should use the keyword defer when using this tag inside <head>.
For example-
<script src="script.js" defer></script>
What defer does is tells our webpage to load the javascript after the html and css files have finished loading. This is because javascript takes time to load which may cause our webpage to take a longer time to load on browsers. This is turn, reduces our webpage's SEO score and cause our website to visible to fewer and fewer people. And we don't want to be in the second page of Google Search now, do we?
lang- This attribute is used along with the opening <html> tag.
<html lang="en-US">

While this tag is often overlooked by beginner web developers but it is very important as search engines are better able to index our webpages when the lang attribute is present.
<meta>- Although everything inside the <head> tag is already a part of the metadata, HTML provides an official way of adding metadata to our webpages. This is where <meta> comes in. It helps us add several types of metadata to our webpages.
- charset- charset is something we use to set the character encoding for our webpages. We use it to tell the browser what convention to follow to convert digital data from binary to decimal to character form.They are of different types such as ANSI, ASCII or UTF-8.
- name and content- these attributes are used with meta tags to set the properties such as name of the author, description of the file and stuff like that. For example- <meta name="author" content="Anubhav Jain"> Such tags are pretty helpful for SEO or in case someone wants to know who developed a particular page.
Favicons- another way of enriching our webpages is adding a small icon to our page. These are small but good features to have in our webpages.

For example-

<link rel="icon" href="favicon.ico" type="image/x-icon">

Well, that's it folks! If it helps, do like this post. If you would like to reach out, you can find me on LinkedIn or Twitter

Blog

HTML Head and Metadata

Anubhav Jain

Join Our Newsletter. No Spam, Only the good stuff.

Related