The HTML Meta Elements contains the metadata about the HTML page.
And Metadata refers to data about data. Or in other words, it contains data about the HTML document.
Confused? No worries, we will make it simple in a while.
As said Meta Elements contains the metadata about the HTML page. And the meta elements should always be placed within the <head> element.
<html>
<body>
<head>
<meta name="description" content="LearnersLesson provides tutorial on all languages">
</head>
</body>
</html>
So, in the above example we have placed the meta element within the <head> element.
<head> <meta name="description" content="LearnersLesson provides tutorial on all languages"> </head>
We will learn about name and content attribute of the meta element shortly.
Meta Elements in HTML is used mainly for SEO(Search Engine Optimisation). If your meta elements are well defined in your webpage, search engines like google can get necessary information and display them in google search results.
The meta elements helps in defining the page’s title, description, keywords e.t.c. The contents of meta elements are not displayed on the web page. But they are quite useful for SEO.
Let us see next what all attributes are there in the meta element.
The meta element has the following attributes :
The name attribute and the content attribute comes as a pair for the meta elements. The name attribute represents the name of the metadata, while the content attribute represents the value of the metadata.
Let us understand name and content attribute with the below example.
<html>
<body>
<head>
<meta name="description" content="LearnersLesson provides tutorial on all languages">
</head>
</body>
</html>
If you look at the above code, we have used the name attribute and the content attribute.
<meta name="description" content="LearnersLesson provides tutorial on all languages">
Now, let's pause here a little. And go back to the definition of meta elements. It says, the HTML Meta Elements contains the metadata about the HTML page. And metadata contains data about the HTML document.
So, in the above <meta> element, we have
name="description"
and
content="LearnersLesson provides tutorial on all languages"
Which in simple word refers to the description of the webpage in short. i.e. LearnersLesson provides tutorial on all languages.
But hang on! You can have a large website with a lot of content. Then why to make it short.
Well! It is for the search engines like google. This short text is something that google displays for you when someone searches your site on google.
The name attribute can have other values like keywords. For keywords you can keep the content as the necessary keywords that helps google to understand, which all keywords are used on your website.
<html>
<body>
<head>
<meta name="keywords" content="HTML, CSS, Java Script, JQuery">
</head>
</body>
</html>
So, in the above example, we have used the important keywords like HTML, CSS, Java Script, JQuery for the content attribute.
Similarly, we have revised and author for the name attribute. Let us see them below.
<html>
<body>
<head>
<meta name="revised" content="Tutorialspoint, 21/01/2025" />
<meta name="author" content="Bill Gates" />
</head>
</body>
</html>
In the above code we have used revised for name attribute. Which says, when the page was last refreshed.
<meta name="revised" content="Tutorialspoint, 21/01/2025" />
Then we have used author for name attribute. Which says, who is the author of the web page.
Next let us understand the charset attribute for the meta element.
The charset attribute defines the character encoding for the HTML document.
<html>
<body>
<head>
<meta charset="UTF-8">
</head>
</body>
</html>
So, in the above code, charset="UTF-8" defines the character encoding.
The http-equiv attribute is used to specify HTTP header for the content attribute.
<html>
<body>
<head>
<meta http-equiv="refresh" content="30" />
</head>
</body>
</html>
So, in the above example, we have used refresh with the http-equiv attribute. And kept the value of content attribute as 30. Which says, refresh the web page every 30 seconds.
<meta http-equiv="refresh" content="30" />
Similarly, we can set the cookie for your webpage using http-equiv="cookie".
<html>
<body>
<head>
<meta http-equiv="cookie" content="userid=dummyuser; expires=Sunday, 20-Jan-25 10:00:00 CST;" />
</head>
</body>
</html>
So, in the above code, we have set the cookie using the http-equiv attribute.
<meta http-equiv="cookie" content="userid=dummyuser; expires=Sunday, 20-Jan-25 10:00:00 CST;" />
The cookie that expires on 20th January 2025 at 10:00 CST.