HTML <meta> Tag

The HTML <meta> tag defines metadata about an HTML document, including character set, description, keywords, author, and viewport settings. Placed within the <head> element, metadata aids browsers, search engines, and web services in interpreting and displaying content.

It helps in defining the page’s title, encoding, author, and viewport settings, etc. These tags are not visible on the web page but play a vital role in structuring and categorizing content for browsers and search engines.

Note: The meta tag also accepts Global Attributes in HTML.

Syntax:

<meta attribute-name="value">

Attributes:

Attribute Values	Description
name	This attribute is used to define the name of the property.
http-equiv	This attribute is used to get the HTTP response message header.
content	This attribute is used to specify properties value.
charset	This attribute is used to specify a character encoding for an HTML file.
scheme	Determines a scheme to be utilized to decipher the value of the substance attribute.

Example: Implementation of meta tag in the head tag

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
                   initial-scale=1,
                   maximum-scale=1">
    <meta name="description" content="A Computer Science portal for Beginner. 
         It contains well written, well thought 
         and well explained computer science and 
         programming articles, quizzes and practice/competitive
         programming/company interview Questions.">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

    <h2>w3wiki</h2>
    <p>
        This is an example of meta tag
    </p>

</body>

</html>

Output:

HTML tag

There are various other ways to implement the <meta> tag that can use the following attribute values:

Table of Content

Highlighting Important Keywords
Providing a Description of the web page
Document Revision Date
Automatic Refresh
Specifying Author of the Webpage

The <meta> tag contains Important keywords for web page ranking, aiding search engines in indexing content and optimizing its SEO rank. This process, known as Search Engine Optimization (SEO), enhances visibility and accessibility of web content.

Example: The Implementation of <meta> tag with the name & content attributes & their value is set as the keywords & some content.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- meta tag starts -->
    <meta name="keywords" content="Meta Tags, Metadata" />
    <!-- meta tag ends -->
</head>

<body>
    <p>
        Hello w3wiki!
    </p>
</body>

</html>

Output:

Hello w3wiki!

A brief/short description of the web page can be included in the Meta tag, which will help the web page rank on the internet.

Example: The Implementation of the <meta> tag to provide the website’s description.

HTML

<!DOCTYPE html>
<html>

<head>
  <!-- meta tag starts -->
  <meta name="keywords" 
        content="Meta Tags, Metadata" />
  <meta name="description" 
        content="w3wiki is a computer science portal." />
  <!-- meta tag ends -->
</head>

<body>
  <p>
    w3wiki!
  </p>
</body>

</html>

Output:

w3wiki

The meta tag is used to give the information about the last updated document. This information is used by various web browsers when refreshing the web page.

Example: The Implementation of the <meta> tag to provide the last updated document information.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- meta tag starts -->
    <meta name="keywords" content="Meta Tags, Metadata" />
    <meta name="description" content="Learn about Meta Tags." />
    <meta name="revised detail" content="last updated time" />
    <!-- meta tag ends -->
</head>

<body>


    <p>w3wiki!</p>


</body>

</html>

Output:

w3wiki!

A specified time will be mentioned in the meta tag after which the webpage will be automatically refreshed ie., this meta tag is used to specify a duration after which the web page will keep refreshing automatically after the given duration.

Example: The below code will refresh the web page after 8 sec.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- meta tag starts -->
    <meta name="keywords about" 
          content="Meta Tags, Metadata" />
    <meta name="description" 
          content="Learning about Meta Tags." />
    <meta name="revised about" 
          content="w3wiki" />
    <meta http-equiv="refresh" 
          content="8" />
    <!-- meta tag ends -->
</head>

<body>


    <p>w3wiki!</p>


</body>

</html>

Output:

Setting the tag attribute value to auto-refresh the webpage for the specified duration

MetaTag allows us to mention the name of the author of the webpage as follows.

Example: The Implementation of of the <meta> tag to provide the author’s details.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- meta tag starts -->
    <meta name="keywords used " 
          content="Meta Tags, Metadata" />
    <meta name="description about" 
          content="Meta tags learning." />
    <meta name="author" 
          content="Akash Kumar17" />
    <!-- meta tag ends -->
</head>

<body>
    <p>w3wiki!</p>
</body>

</html>

Output:

w3wiki!

Highlighting Important Keywords:

Providing a Description of the web page:

Document Revision Date:

Automatic Refresh:

Specifying Author of the Webpage:

Browser Supports:

Contact Us