In this article, you will learn about HTML meta tags, different types of attributes used in meta tag and also learn various ways to implement the <meta> tag with the help of examples.
HTML Meta Tags
The <meta> tag in HTML provides additional data or information about HTML Document. This meta tag is an empty element which has no closing tag but still it carries the information of the attribute that are written inside the meta tag. By using <meta> tag, web designer can control the viewport.
In other words, meta tag in html is used to define metadata about an html document or web page.
Metadata is not displayed on any web page or HTML document but adding meta tags to any HTML document or website is considered a good practice as it helps the search engines to better understand the information provided by the HTML document. These html <meta> tags are used to add name/value pairs to express properties of HTML documents or web page, like author name, list of keywords, expiry date etc.
The <meta> tag is placed inside the <head> tag and we can use it more than once in an html document.
Now, have a look at the Syntax of HTML meta tag that are given below;
<meta attribute-name="value">
Attributes Used in Meta Tags
In HTML meta tag, four attributes are accepted which are explained in detail in the following table.
S.No | Attribute | Description |
---|---|---|
1. | charset | To designate the encoding of characters for the html document. |
2. | content | The associated value with the name attribute and the http-equiv is specified by this. |
3. | http-equiv | To provide the http header for the value content of the attributes or the information. |
4. | name | Used to designate a name for the metadata. |
Note: The meta tag also supports Global Attributes in HTML that means you can also use Global attributes inside html <meta> tag.
Now let's describe the html meta tag with the help of simple following example;
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Welcome to Answersjet. India's most trusted website for learning basics of programming languages and tutorials.">
<meta name="keywords" content="HTML,CSS,XML,programming language,Python,JavaScript">
<meta name="author" content="Deepak Thakur">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>In this illustration we have used all major attribute/values of html Meta Tags.</p>
</body>
</html>
Output
Additionally, there are other ways to implement the <meta> tag.
HTML Meta Keywords
The html meta tag can also be used to define important keywords related to html document or web page. These keywords later help the search engines to understand and index your webpages.
Now let's understand html meta keywords with the help of following example;
<!DOCTYPE html><html>
<head>
<title>html Meta Keywords Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata, learn html, Answersjet," />
</head>
<body>
<p>In this example we have used html meta tag to add keywords on html document.</p>
</body>
</html>
Output
HTML Meta Description
The html meta tag can also be used to define description about the html document or web page. Later, this description also helps the search engines to understand and index your webpages.
Now let's illustrate html meta description with the help of following example;
<!DOCTYPE html><html>
<head>
<title>html Meta Description Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata, learn html, Answersjet," />
<meta name="description" content="Learning about Html Meta Tags with Answersjet." />
</head>
<body>
<p>In this example we have used html meta tag to add description on html document.</p>
</body>
</html>
Output
HTML Meta Revision Date
The html meta tag can also be used to define when last time the html document or webpage was updated.
Now let's understand html meta revision date with the help of following example;
<!DOCTYPE html><html>
<head>
<title>html Meta Revision Date Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata, learn html, Answersjet," />
<meta name="description" content="Learning about Html Meta Tags with Answersjet." />
<meta name="revised" content="Answersjet, 16/3/2022" />
</head>
<body>
<p>In this example we have used html meta tag to add Revision Date on html document.</p>
</body>
</html>
Output
HTML Meta Automatic Refresh
Html meta tags can be used to define the period after which your web page will continue to refresh automatically.
Now let's illustrate html meta refresh with the help of following example;
<!DOCTYPE html><html>
<head>
<title>html Meta Automatic Refresh Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata, learn html, Answersjet," />
<meta name="description" content="Learning about Html Meta Tags with Answersjet." />
<meta name="revised" content="Answersjet, 16/3/2022" />
<meta http-equiv="refresh" content="5" />
</head>
<body>
<p>In this example we have used html meta tag to add Automatic Refresh on html document.</p>
</body>
</html>
Output
HTML Meta Redirection
The html meta tag can also be used to redirect one page to any other webpage.
With the following illustration we will understand the html meta redirection;
<!DOCTYPE html><html>
<head>
<title>html Meta page redirection Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata, learn html, Answersjet," />
<meta name="description" content="Learning about Html Meta Tags with Answersjet." />
<meta name="revised" content="Answersjet, 16/3/2022" />
<meta http-equiv="refresh" content="5; url=http://www.answersjet.com" />
</head>
<body>
<p>In this example we have used html meta tag to add page redirection on html document.</p>
</body>
</html>
Output
HTML Meta Author name
The html meta tag can be used to define author name on a web page.
Now, let's understand the html meta author name with the following illustration;
<!DOCTYPE html><html>
<head>
<title>html Meta Author name Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata, learn html, Answersjet," />
<meta name="description" content="Learning about Html Meta Tags with Answersjet." />
<meta name="author" content="Deepak Thakur" />
</head>
<body>
<p>In this example we have used html meta tag to add author name on html document.</p>
</body>
</html>
Output
HTML Meta Character Set
The html meta tag can also be used to define set of characters that are used within the webpage.
With the following illustration let's understand the html meta character set;
<!DOCTYPE html><html>
<head>
<title>html Meta Character Set Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata, learn html, Answersjet," />
<meta name="description" content="Learning about Html Meta Tags with Answersjet." />
<meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />
</head>
<body>
<p>In this example we have used html meta tag to add Character Set on html document.</p>
</body>
</html>
Output
Conclusion
From above we have learnt about HTML meta tags, different types of attributes used in meta tag and also learn various ways to implement the <meta> tag with the help of examples. The <meta> tag in HTML provides additional data or information about HTML Document. In other words, meta tag in html is used to define metadata about an html document or web page.