Meta Tags in HTML

When you need to specify data about the HTML page, Meta elements comes into picture.
Meta tags include a name/value pair describing the properties of HTML page such as author, description, keywords etc.
You can include more than one meta tags based on what kind of information you need to add in the page.

Why add meta tags?

Meta tags help search engines to get the information about the page. So when some user searches about the information related to your page, a search engine can show your page if you have included proper meta tags and set title. We will not go deep in that because it is related to SEO ( Search Engine Optimization ).
Sometimes, you may have noticed that when you add any link in social media feed such as Facebook, it shows an image, a header and description of the page instead of showing a link as shown in below image. Do you know, from where it gets the info? Meta Tags. ( Every social media has its different meta tags ).
For more info, visit this link

Facebook Sharing
Sharing link in Facebook

Adding Meta tags

Meta tags are added inside head element ( Between <head> and </head> ). There are few attributes that meta tags can have are as per following:

Attribute Description
Name Name of the property. It can be anything like keywords, description, author etc.
content value of the property which is specified in Name
scheme To interpret the value of a property ( Specified in content )
http-equiv To set a cookie or refresh the page. Values can expire, refresh, content-type or set-cookie.

Describe Document

You can use the meta tag to add a description of the page, which is used by the search engines to index the page.

This page has meta tag description.


<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Learn meta tags" />
    </head>
    <body>
        <p>
            This page has meta tag description.
        </p>
    </body>
</html>
                        

Keywords

You can use meta tags to add keywords to the HTML page. Again, keywords can be used by search engines to index your page.

This page has meta tag description and keyword.


<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Learn meta tags" />
        <meta name="keywords" content="Meta tags, HTML" />
    </head>
    <body>
        <p>
            This page has meta tag description and keyword.
        </p>
    </body>
</html>
                        

Refresh Document

Meta tags can be used to refresh the page. You can specify the time in seconds after which page automatically refreshes.

This page has meta tag description and keyword.


<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Learn meta tags" />
        <meta name="keywords" content="Meta tags, HTML" />
        <meta name="refresh" content="5" />
    </head>
    <body>
        <p>
            This page has meta tag description and keyword.
        </p>
    </body>
</html>
                        

In the above code, after every 5 seconds page will automatically refresh.

Set Author Name

Meta tags can also set the author name of the document.

This page has meta tag description and keyword.


<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Learn meta tags" />
        <meta name="keywords" content="Meta tags, HTML" />
        <meta name="author" content="Learnperday Team" />
    </head>
    <body>
        <p>
            This page has meta tag description and keyword.
        </p>
    </body>
</html>
                        

charset

This attribute declares the page's character encoding. Although the standard doesn't request a specific encoding, it suggests using UTF-8.

This page has meta tag description and keyword.


<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Learn meta tags" />
        <meta name="keywords" content="Meta tags, HTML" />
        <meta name="author" content="Learnperday Team" />
        <meta charset="utf-8">
    </head>
    <body>
        <p>
            This page has meta tag description and keyword.
        </p>
    </body>
</html>
                        

Obsolete or Not in use

There are many tags which are obsolete in HTML5 or not used.

  • set-cookie
  • revised

These attributes are not used.


<!DOCTYPE html>
<html>
    <head>
        <meta name = "revised" content = "3/7/2014" />
        <meta http-equiv = "cookie" content = "username = learnperday;" />
    </head>
    <body>
        <p>
            These attributes are not used.
        </p>
    </body>
</html>
                        

Conclusion

In this section, we have learned about the meta tags. Meta tags are quite useful for your website's and webpage's page ranking in search engines. So you should use them properly.
In next section, you will learn about comments in HTML.