Meta tags in HTML for web development

Meta tags in HTML, keywords, document description, document revision date, page redirection, page refreshing and setting cookies

HTML lets you specify metadata which provides additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.

The <meta> tag defines metadata about an HTML document. Metadata is data about data. <meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and view port settings.

Metadata will not be displayed on the page, but is machine parsable. Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. There is a method to let web designers take control over the viewport through the <meta>

The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes. You can include one or more meta tags in your document based on the information you want to keep in your document but in general, meta tags do not impact physical appearance of the document. These tags are used to rank your web page and are useful in SEO.

Adding Meta Tags to the Documents

You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes names, content, scheme, http-equiv

Adding Keywords

You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your web page for searching purpose. The information provided under <meta> tag helps rank web page of your site.

<!DOCTYPE html>
<html>
<head>
<title>Example of Meta Tags</title>
<meta name = "keywords" content = "HTML, web development, meta" />
</head>
<body>
      <p>Hello People</p>
</body>
</html>

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. You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your web page for searching purpose.The snippet code below explain document description with meta tags.

<!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 <meta> tag to give information about updation of document i.e. when last time the document was updated. This information can be used by various web browsers while refreshing your web page.

<!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 ="Programmingtutorial, 17-08-2020" />
</head>
<body>
      <p>Hello World</p>
</body>
</html>

Document Refreshing

A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically. Let us write a code to set refresh time for our page to keep it refreshing after every 15 seconds.

<!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 ="Programmingtutorial, 17-08-2020" />
<meta http-equiv = "refresh" content = "15" />
</head>
<body>
      <p>Hello World</p>
</body>
</html>

Page Redirection

You can use <meta> tag to redirect your page to any other web page. You can also specify a duration if you want to redirect the page after a certain number of seconds. Following is an example of redirecting current page to another page after 15 seconds. If you want to redirect page immediately then do not specify 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 ="Programmingtutorial, 17-08-2020" />
<meta http-equiv = "refresh" content = "15" url = https://www.programmingtutorial.in" />/>
</head>
<body>
      <p>Hello World</p>
</body>
</html>

How to Set Cookies?

Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various information based on your web application need. You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a site visitor. Following example of redirecting current page to another page after 15 seconds is shown below. If you want to redirect page immediately then do not specify content attribute.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = abc; expires =  25-Aug-20 23:59:59 GMT;" />
</head>
<body>
     <p>Hello World</p>
</body>
</html>

If the time is not specified then the cookies expires as the session gets over.