Home
HTML

HTML Meta Tags

Here, we have learnt about HTML meta tags, different types of attributes used in meta tag and also learn various ways to implement the tag...

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 ; attribute used in meta tags

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

html <meta> tag example

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 keywords example

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 Description Example

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 Revision Date Example

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 Automatic Refresh example

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 Redirection example

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 Author name example

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

HTML Meta Character Set Example

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.