HTML - Meta Tags

Previous
Quiz

HTML <meta> tag lets us specify metadata, which is additional important information about a document, in a variety of ways. The META elements can be used to include name and content pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author, etc.

HTML <meta> tag can be used to provide extra information. It's a self-closing element, meaning it doesn't require a closing tag but carries information within its attributes. You can include one or more meta tags in your document based on what information you want to keep in your document, but in general, meta tags do not impact the physical appearance of the document, so from the appearance point of view, it does not matter if you include them or not.

Adding Metadata to Web Pages Using Meta Tags

You can add metadata to your web pages by placing <meta> tags inside the header of the document, which is represented by the <head> tag.

The following metadata can be added using the <meta> tag:

 

Below, you can check all the examples that are well described with the code for how we should use individuals on our website.

Specifying Keywords

You can use the <meta> tag to specify important keywords related to the document, and later these keywords are used by the search engines while indexing your webpage for searching purposes.

Example

Following is an example where we are adding "HTML, Meta Tags, and Metadata" as important keywords about the document:

 <!DOCTYPE html> <html> <head> <title>Meta Tags Example</title> <meta name="keywords" content="HTML, Meta Tags, Metadata" /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Document Description

You can use the <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purposes.

Example

The following example demonstrates how you can define a meta description for a webpage:

 <!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." /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Document Revision Date

You can use the <meta> tag to give information about the last time the document was updated. This information can be used by various web browsers while refreshing your webpage.

Example

The following example demonstrates how you can define a revision date:

 <!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="Tutorialspoint, 3/7/2014" /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Document Refreshing

The <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.

Example

If you want your page to keep refreshing after every 5 seconds, then use the following syntax:

 <!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="Tutorialspoint, 3/7/2014" /> <meta http-equiv="refresh" content="5" /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Page Redirection

You can use the <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.

Example

Following is an example of redirecting the current page to another page after 5 seconds. If you want to redirect the page immediately, then do not specify the content attribute:

 <!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="Tutorialspoint, 3/7/2014" /> <meta http-equiv="refresh" content="5; url=http://www.tutorialspoint.com" /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Setting Cookies

Cookies are data stored in small text files on your computer, and it is exchanged between a web browser and a web server to keep track of various information based on your web application needs.

You can use the <meta> tag to store cookies on the client side, and later this information can be used by the Web server to track a site visitor. If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.

Example

Following is an example of redirecting the current page to another page after 5 seconds. If you want to redirect the page immediately, then do not specify the content attribute.

 <!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="Tutorialspoint, 3/7/2014" /> <meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Note: You can check the PHPand Cookies tutorial for a complete detail on cookies.

Setting Author Name

You can set an author name on a web page using a <meta> tag. Author name be specified by assigning the "author" value to the "name" attribute.

Example

The following example demonstrates how you can set an author name:

 <!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="author" content="Mahnaz Mohtashim" /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Specify Character Set

You can use the <meta> tag to specify the character set used within the webpage. By default, Web servers and Web browsers use ISO-8859-1 (Latin1) encoding to process Web pages.

Example

Following is an example to set UTF-8 encoding:

 <!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="author" content="Mahnaz Mohtashim" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Example

To serve the static page with traditional Chinese characters, the webpage must contain a <meta> tag to set Big5 encoding:

 <!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="author" content="Mahnaz Mohtashim" /> <meta http-equiv="Content-Type" content="text/html; charset=Big5" /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Video: HTML Meta Tags

Print Page
Previous
Next
Advertisements
close