Skip to content
Related Articles

Related Articles

Improve Article

HTML <Meta> Tag

  • Difficulty Level : Basic
  • Last Updated : 23 Feb, 2021

The metadata means information about data. The <meta> tag in HTML provides information about HTML Document or in simple words, it provides important information about a document. These tags are basically used to add name/value pairs to describe properties of HTML documents, such as expiry date, author name, list of keywords, document author, etc. This tag is an empty element because it only has an opening tag and no closing tag, but it carries information within its attributes. A web document can include one or more meta tags depending on information, but in general, it doesn’t affect the physical appearance of the document. 

Syntax

<meta attribute-name="value">

Attributes:

  • 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.

Key Points:

  • The <meta> tag contents are not visible on your browser.
  • They are just used to give additional information about the HTML document.
  • The <meta> tags are added to our HTML document for the purpose of Search Engine Optimisation.
  • They are added inside the <head> tag.

Example 1: Specifying Keywords, the meta tag is used to specify the important keyword related to the HTML document. 



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!

Example 2: Document Description, this meta tag is used in an HTML document to provide a short description of the document.

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!

Example 3: Document Revision Date, this 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. 
 

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!

Example 4: Document Refreshing, this meta tag is used to specify a duration after which the web page will keep refreshing automatically after the given duration. The code to refresh the web page after 8 sec is given below: 

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: 

GeeksforGeeks!

Example 5: Setting Author Name, the name of the author can be set on a web page through an HTML document using a meta tag. 

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:

  • Google Chrome
  • Internet Explorer
  • Mozilla
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :