HTML <meta> Tag - GeeksforGeeks

HTML <meta> Tag

Last Updated : 17 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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 geeks. 
         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>GeeksforGeeks</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:

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 GeeksforGeeks!
    </p>
</body>

</html>

Output:

Hello GeeksforGeeks!

Providing a Description of the web page:

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="Geeksforgeeks is a computer science portal." />
  <!-- meta tag ends -->
</head>

<body>
  <p>
    GeeksforGeeks!
  </p>
</body>

</html>

Output:

GeeksforGeeks

Document Revision Date:

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>GeeksforGeeks!</p>


</body>

</html>

Output:

GeeksforGeeks!

Automatic Refresh:

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="GeeksforGeeks" />
    <meta http-equiv="refresh" 
          content="8" />
    <!-- meta tag ends -->
</head>

<body>


    <p>GeeksforGeeks!</p>


</body>

</html>

Output:

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

Specifying Author of the Webpage:

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>GeeksforGeeks!</p>
</body>

</html>

Output:

GeeksforGeeks!

Browser Supports:



A
Akashkumar17
Improve
Previous Article
HTML | <menuitem> tag
Next Article
HTML5 <meter> Tag

Similar Reads

What's the difference between meta name and meta property?
Meta Data: The metadata means information about data. So basically Meta tag provides you the information on the HTML document. So basically this tag is an empty tag which means it only has an opening tag and no closing tag. The number of meta tags in an HTML document depends upon the HTML document and it doesn't affect the physical appearance of th
2 min read
&lt;meta charset="utf-8"&gt; vs &lt;meta http-equiv="Content-Type"&gt;
&lt;meta charset="utf-8"&gt; is an HTML tag that is used to indicate the web page's character encoding. In order to see the correct content, the tag’s function is used which let the browser know what character encoding was used in the HTML document. The tag is located in the document’s head. The utf-8 is an encoding character set that contains almo
3 min read
How to use Meta Tag to redirect an HTML page?
URL redirection, also called URL forwarding is a way to send users to a different URL from the one they originally requested. The three most commonly used redirects are 301, 302, and Meta Refresh. Meta Refresh Redirect is a client-side redirect. Unlike 301 and 302 redirects that happen on the webserver, Meta Refresh Redirect takes place in a web br
1 min read
Why to use viewport value in &lt;meta&gt; tag in HTML ?
The viewport is the content area on the web page that is visible to the user or the page visitor. The viewport does not have a fixed size, it varies with the screen size as the size decreases or increases the viewport. In earlier times when phones and tablets were not used to access the web pages, the static and fixed-size designs were common to us
3 min read
What does the charset attribute specify in HTML meta Tag ?
The charset attribute in &lt;meta&gt; tags are used to specify the character encoding for the document. It defines the character set used to interpret and display the text content of the HTML document. This attribute ensures that the browser correctly renders the text content by interpreting it with the specified character encoding. Syntax&lt;meta
2 min read
HTML Viewport meta tag for Responsive Web Design
A Browser's viewport is the area of the web page in which the content is visible to the user. The viewport does not have the same size, it varies with the variation in screen size of the devices on which the website is visible. For a laptop, the viewport has a larger size as compared to a smartphone or tablet. Note: When a page is not made responsi
3 min read
How to get the information from a meta tag using JavaScript ?
To display meta tag information in HTML with JavaScript, we will use a method called getElementByTagName() function. Method 1: Using getElementsByTagName() method. Syntax: document.getElementsByTagName("meta"); With this, we can get all the meta elements from an HTML file. As we click on the button, all the meta tag names and content will be displa
2 min read
How to set the view-port meta tag for iPhone that handles rotation properly ?
The view-port meta is a short tag that is included in the head of the HTML document that tells the browser how the page should be rendered. The view-port meta element is what turns a regular website page into a responsive page. Options of the View-port meta tag: There are many options that can be included in the content section of the meta view-por
3 min read
What is the purpose of using the &lt;meta charset="UTF-8"&gt; Tag ?
The &lt;meta charset="UTF-8"&gt; Tag in HTML defines the character encoding for the document, specifying the use of UTF-8. This encoding supports a wide range of characters from different languages, ensuring proper display and interpretation. It also promotes compatibility across browsers and platforms and is a recommended best practice for consist
1 min read
Explain the use of the &lt;meta charset&gt; Tag
The &lt;meta charset&gt; tag in HTML is used to specify the character encoding for the document. Character encoding defines how characters are represented and interpreted by browsers. Properly setting the character encoding is crucial for displaying text correctly, especially when using non-ASCII characters or different language scripts. Syntax: C/
1 min read
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox