Meta Tag in HTML5

Introduction

 
Meta elements provide information about a given Web page, most often to help search engines categorize them correctly. They are inserted into the HTML document, but are often not directly visible to a user visiting the site or, Metadata is information about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page but will be machine parsable. The HTML <meta> tag is used for declaring metadata for the HTML document. Metadata can include document description, keywords, author, etc. It can also be used to refresh the page or set cookies. The meta tag is placed between the opening/closing <head> </head> tags.
 

Attributes

 
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double-quotes.
 
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
 

Element-Specific Attributes

 
The following table shows the attributes that are specific to this tag/element.
 
Attributes Introduced by HTML5
 
Attributes Value Description             
Name author, description
 
keywords, generator
 
revised, others
It provides a name for the information in the content attribute.
content text Specifies the content of the meta-information
http-equiv content-type, content-style-type
 
expires
 
set-cookie
 
others
It provides an HTTP header for the information in the content attribute.
 

Global Attributes

 
The following attributes are standard across all HTML 5 tags.
 
HTML5 Global Attributes
accesskey draggable style
class hidden tabindex
dir spellcheck  
contenteditable id title
contextmenu lang  

 
Event Handler Content Attributes

 
Here are the standard HTML 5 event handler content attributes.
 
onabort onerror* onmousewheel
onblur* onfocus* onpause
oncanplay onformchange onplay
oncanplaythrough onforminput onplaying
onchange oninput onprogress
onclick oninvalid onratechange
oncontextmenu onkeydown onreadystatechange
ondblclick onkeypress onscroll
ondrag onkeyup onseeked
ondragend onload* onseeking
ondragenter onloadeddata onselect
ondragleave onloadedmetadata onshow
ondragover onloadstart onstalled
ondragstart onmousedown onsubmit
ondrop onmousemove onsuspend
ondurationchange onmouseout ontimeupdate
onemptied onmouseover onvolumechange
onended onmouseup onwaiting
 
For example
 
Content Attribute
 
The required content attribute specifies the content of the meta-information. The value of the content attribute depends on the value of the name or http-equiv attribute.
  1. <html>  
  2.     <head>  
  3.         <meta name="description" content="About article" />  
  4.         <meta name="keywords" content="C#,asp.net,vb.net,sqlserver" />  
  5.         <meta name="author" content="Rohatash" />  
  6.         <meta http-equiv="content-type" content="text/html;charset=UTF-8" />  
  7.     </head>  
  8.     <body></body>  
  9. </html>  
Name Attribute
 
The name attribute provides a name for the information in the content attribute. The value of the name attribute depends on the value of the content attribute. If the http-equiv attribute is set, the name attribute should not be set.
  1. <html>  
  2.     <head>  
  3.         <meta name="description" content="About article" />  
  4.         <meta name="keywords" content="C#,asp.net,vb.net,sqlserver" />  
  5.         <meta name="author" content="Rohatash" />  
  6.     </head>  
  7.     <body></body>  
  8. </html>   
http-equiv attribute
 
This attributes Provides an HTTP header for the information in the content attribute. The following example demonstrates how to use the <meta> tag to redirect to another web page.
  1. <html>  
  2.     <head>  
  3.         <title>Meta Refresh Example</title>  
  4.         <meta http-equiv="refresh" content="4;url=http://www.vbdotnetheaven.com/" />  
  5.     </head>  
  6.     <body style="background-color:#ff9900;">  
  7.         <p>Watch me redirect to another page in 4 seconds...</p>  
  8.     </body>  
  9. </html>  
Internet Explorer
 
eq1.gif
Figure1
 
After 4 seconds this page will be redirected to vbdotnetheaven.com.
 
eq2.gif
Figure2
 
FireFox 
 
eq3.gif  
Figure3