Introduction
This chapter demonstrates about the HTML Meta Tags which is used to add the additional information of the document in several ways. Following are the concepts covered.
- About Meta Tags
- Adding Meta tags
Description
HTML Meta tags is used to provide additional information to the document. The tags are used to include the name/value pairs and its properties like author, expiry date, key words list. Meta tags don't have the closing tags and carries the information by using the attributes.
Description
Meta tags are placed in between the <head>....</head > tags to get the additional information of the document. Browser will not display the meta data. Following are few attributes of meta tags.
Specifying key Words
User can include the important keywords by using <meta> tags, the keywords are used by the browser while indexing the web page. The snippet code below explain using the keywords with meta tags.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>SPlessons!</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Document Description
In order to give the short description of the document user can use the <meta> tags, the document description is used by the browsers while indexing the web page. The snippet code below explain document description with meta tags.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>SPlessons!</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Document Revision Date
User can update the last revision date of the document by using the <meta> tags. The document revision date information can be obtained by refreshing the web page. The snippet code below explain document revision date with meta tags.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="SPlessons,19/10/2015" />
</head>
<body>
<p>SPlessons!</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Page Redirection
User can redirect from one page to another page by using the <meta> tags, the page get redirected automatically after given time. The snippet code below explain page redirection with meta tags.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="splessons, 3/7/2014" />
<meta http-equiv="refresh" content="5; url=http://www.splessons.com" />
</head>
<body>
<p>SPlessons!</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
After certain amount of time the page get redirect to the splessons home page is as shown below.
Author Name
User can set the author name of the document by using the <meta> tags, the snippet code below explain giving an author name with meta tags.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="author" content="John steaves" />
</head>
<body>
<p>SPlessons!</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Attribute | Description |
|---|---|
| Name | Gives the names like author name, description, keywords etc. |
| Content | Used for properties value. |
| Scheme | Used to specify a scheme to interpret the value of the property. |
Key Points
- Meta tags provide additional information of the document.
- Meta data will not displayed on the web browsers.
- Meta data will disturb the physical appearance of the document.