HTML Meta Tags

  • Metadata is often specified as data about data. In the same way, HTML <meta> tag provides various information about the current HTML file.
  • The information provided by the <meta> tag is not displayed in the web page, but, it is important for browsers, web server, and search engines.
  • Meta tag may include information such as keywords related to the document, author of the document, description of the document etc.
  • <meta> tag is included in the head element.
  • meta element is an empty or void element that means it takes no content to be surrounded, hence it has no closing tag. You can use a space and a forward slash before the > symbol at the end. Like this – <meta name=”author” content=”Neil Fin” />

Attributes of <meta> tag

You can use the following attributes in <meta> tag in HTML5.

  1. name
  2. http-equiv
  3. content
  4. charset

1. The name attribute

When <meta> tag uses name attribute, it provides document-level information which is the information that is applied to the whole HTML document.

In the <meta> tag, document metadata or document-level information is expressed in name/value pair as attributes. The name of the metadata is specified in name attribute and the value of the metadata is specified in content attribute. So, whenever the name attribute is used in <meta> tag, the content attribute is also specified.

There are some predefined names of the name attribute of the <meta> tag. Few of those are –

  1. application-name: If the webpage is a part of a web application, then this name(application-name) of the name attribute is used to mention. The name of the application is mentioned in the content attribute.
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta name=”application-name” content=”HTML5 for beginners”>
    </head>
    <body>
    </body>
 </html>

    Line 4 mentions that the above html page is part of the ”HTML5 for beginners” web application.

    In each webpage, there must not be more than one “application-name” name attribute.
  2. author: The name of the current webpage is mentioned with this name attribute.
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta name=”author” content=”Neil Fin”>
    </head>
    <body>
    </body>
</html>

    Line 4 mentions that the author name of the above html page is Neil Fin.

  3. description: With this name attribute, you can add description of the current webpage.
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta name=”description” content=”this page is for learning meta tag of HTML”>
    </head>
    <body>
    </body>
 </html>

    Line 4 mentions that the description of the page.

    In each webpage, there must not be more than one “description” name attribute.
  4. generator: If the current HTML page is generated by any software, you can use this name attribute(generator) to mention that. Example of generator softwares could be PHP, ASP, Ruby on Rail, WordPress etc..
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta name=”generator” content=”Wordpress”>
    </head>
<body>
</body>
</html>

    Line 4 expresses that the page is generated by WordPress.

    If you hand coded the current page, don’t use this name attribute.
  5. keywords: Search engine finds a webpage by keywords used on that page. To rank a webpage with some keywords, mention those keywords as comma separated strings in the content attribute and use this name attribute(keywords) as the name attribute. See the following example-
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta name=”keywords” content=”meta tag, HTML, HTML5”>
    </head>
    <body>
    </body>
</html>

    Line 4 expresses that the keywords used for the page are ”meta tag”, “HTML”, and “HTML5”.

    Other than the above predefined name attributes, there are some metadata extensions too. Let’s review few of those-

  6. robots: this name attribute tells search engine how to treat the current webpage. Three values are used as content attribute that the search engines can recognize. These are “noindex”, “noarchive”, and “nofollow”. “noindex” tells search engine not to index this page. “noarchive” tells search engine not to create cached version of the page. “nofollow” tells search engine not to follow links from this page. If you want to use more than one value, use comma to separate those.
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta name=”robots” content=”noarchive, nofollow”>
    </head>
    <body>
    </body>
 </html>

    Line 4 tells search engine not to create cache version of this page and not to follow any link mentioned in this page.

  7. revised: This name attribute mentions the last time the webpage was updated.
    Example:

    <!doctype html>
<html lang="en">
    <head>
       <meta name=”revised” content=”Monday February 17th, 2014, 6:48pm”>
    </head>
    <body>
    </body>
</html>

    Line 4 tells the last updated date of the webpage.

2. The http-equiv attribute:

When http-equiv attribute is specified in the <meta> tag, it acts as pragma directive which is instruction to the web server about how the HTML page should be send to the browser.

When a user requests a webpage, the web server response back to the user with the right webpage. It is the HTTP(Hypertext Transfer Protocol) which transports data between web server and browser. With each response from the server, it also includes some headers with the webpage. http-equiv attributes can be used to replace the headers information.

There are three defined names or keywords for the http-equiv attribute. Let’s see these keywords with examples-

  1. content-type: Browsers use character set to interpret HTML code and to display to the browser. “content-type” keyword of http-equiv attribute is used to specify the character set.
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta http-equiv=”content-type” content=”text/html; charset=UTF-8”>
    </head>
    <body>
    </body>
</html>

    Line 4 instructs browsers to use the UTF-8 character set.

    It is an alternative way of specifying character set. In HTML5, charset attribute oftag is used to specify the character set.

    Don’t use both ways together in a single webpage to define character set.
  2. default-style: To style a HTML page, we use CSS (cascading style sheet). CSS usually written in separate file and the file is attached with the HTML document. Suppose there are few style sheets attached to your HTML file and you want to use one of those as default style sheet. You can mention it by using the default-style keyword in http-equiv attribute in the <meta> tag.  Just make sure that the value of the content of this attribute must match with the value of the title attribute of the link or script element.
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta http-equiv=”default-style” content=”master css”>
        <link rel = “alternative stylesheet” href=”css/style.css” title=”master css” />
        <link rel = “alternative stylesheet” href=”css/style-form.css” title=”form css” />
    </head>
    <body>
    </body>
</html>

    In line 4, the value of the content attribute is “master css”, and the title attribute of the first <link> tag (line 4) matches with it. So, the page will load style.css style sheet by default.

  3. refresh:  refresh keyword in http-equiv attribute is used to reload a webpage again and again after a certain period or redirect a user to another webpage after a specific time.You might have seen front page of newspaper websites keep reloading after a certain interval. The following HTML page will reload the web page after every 60 seconds.
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta http-equiv=”refresh” content=”60”>
    </head>
    <body>
    </body>
</html>

    In line 4, the value of the content attribute holds the number 60. So, the browser will reload in every 60 seconds.You might have come across to a webpage that told you that you’d be redirected to another page after 10 seconds. Well, this can be done with this refresh keyword. Add two things as value in the content attribute. First one is the number of seconds to wait, and then mention the URL to be redirected to after the URL identifier. See the following example-
    Example:

    <!doctype html>
<html lang="en">
    <head>
        <meta http-equiv=”refresh” content=”10 URL=http://schoolsofweb.com”>
    </head>
    <body>
    </body>
</html>

    See the line 4, after 10 seconds, the page will be redirected to http://schoolsofweb.com.

    In a single HTML document you can’t use more than one http-equiv attribute with refresh keyword.

    Some search engines may consider a web page as spam which tries to redirect a page using this method and may de-index. So, use this feature carefully.

3. The charset attribute:

charset attribute is used to define which character-set to be used by the browser to interpret the current HTML page and display accordingly.

Example:

<!doctype html>
<html lang="en">
<head>
       <meta charset=”UTF-8” />
</head>
    <body>
    </body>
</html>

In line 4, the charset attribute set UTF-8 as character set.

4. The content attribute

You already have seen different usages of content attribute. It is used in addition with name or http-equiv attribute.

<< HTML Attributes : Previous Lesson Next Lesson : HTML Head >>