Skip to main content

HTML - Meta Tags

HTML lets you specify metadata - 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 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 what information you want to keep in your document but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not.

Adding Meta Tags to Your 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 −
Sr.NoAttribute & Description
1
Name
Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
2
content
Specifies the property's value.
3
scheme
Specifies a scheme to interpret the property's value (as declared in the content attribute).
4
http-equiv
Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Specifying 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 webpage for searching purpose.

Example

Following is an example, where we are adding HTML, Meta Tags, 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>
This will produce the following result −

Document Description

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 webpage for searching purpose.

Example

<!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 when last time the document was updated. This information can be used by various web browsers while refreshing your webpage.

Example

<!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 = "Tech Tech Technical, 13/1/2019" />
   </head>
 
   <body>
      <p>Hello HTML5!</p>
   </body>
 
</html>

Document Refreshing

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

Example

If you want your page 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 = "Tech Tech Technical, 13/1/2019" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
 
   <body>
      <p>Hello HTML5!</p>
   </body>
 
</html>

Page Redirection

You can use <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 current page to another page after 5 seconds. If you want to redirect page immediately then do not specify contentattribute.
<!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 = "Tech Tech Technical, 13/01/2019" />
      <meta http-equiv = "refresh" content = "5; url = http://www.techtechtechnical.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 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.

Example

Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify contentattribute.
<!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 = "Tech Tech Technical, 13/1/2019" />
      <meta http-equiv = "cookie" content = "userid = xyz;
         expires = Wednesday, 13-January-19 23:59:59 GMT;" />
         
   </head>
 
   <body>
      <p>Hello HTML5!</p>
   </body>
 
</html>
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.

Setting Author Name

You can set an author name in a web page using meta tag. See an example below −

Example

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

Specify Character Set

You can use <meta> tag to specify character set used within the webpage.

Example

By default, Web servers and Web browsers use ISO-8859-1 (Latin1) encoding to process Web pages. 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 = "Naresh Apat" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
 
   <body>
      <p>Hello HTML5!</p>
   </body>
 
</html>
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 = "Naresh Apat" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
 
   <body>
      <p>Hello HTML5!</p>
   </body>
 
</html>

Labels:

Comments

Post a Comment

Popular posts from this blog

The new TAG Heuer Carrera Calibre Tourbillon Nanograph is a lot of buzzwords in a beautiful package

Almost every word in the name of TAG Heuer’s new watch – the Carrera  Calibre Heuer 02T Tourbillon Nanograph – is important. Carrera connects it to TAG’s long history of chronographs while Calibre suggests a handmade watch made with some technical prowess. Tourbillon means you can expect this thing to cost more than a car (about $25,000 when it goes on sale) and Nanograph suggests that this thing is doing something quite unique. And it is. TAG Heuer loves experimenting with new materials and the Nanograph features a new hairspring design that is unique to TAG. The hairspring, which is made of carbon-composite, is lightweight and unaffected by gravity or shock. It also offers “perfect concentric oscillations” and is completely antimagnetic. Couple that with the rotating tourbillon and the suggestion is that this watch will remain accurate under all sorts of pressure. Further, rest of the movement includes carbon fiber and aluminum which reduces the effects of temperat...
Post a Comment
Read more

Realme U1 Review: Perfect Package With Required Features

Hello friends, the Realme U1 smartphone has MediaTek Helio P70 processor. You will see what features & drawbacks there are in it. You also know whether this Realme smartphone is worth buying or not. Just a 6-month-old smartphone company, Realme, has made great recognition in a short span of time. The company has so far launched 5 of its total smartphones and they all come in less than Rs 20,000. The aim of the company is to draw the youth of the country on their side so that real-time smartphones can be seen in more hands. Realme U 1 has a starting price of Rs 11,999 and with this price, the Chinese company wants to give tough competition to the companies like xiaomi, Huawei & Honor in the budget category. Realme U1 is the world's first handset with the MediaTek Helio P70 processor. The most important feature of the phone is the 25 megapixel front camera and 3500mAh strong battery. Design of Realme U1 At first glance, Realme looks like the previous company o...
Post a Comment
Read more

Asus ROG Phone goes up for pre-order in the UK with £100 discount

After  yesterday's launch in the UK , the Asus ROG Phone is finally set to hit the shelves in the country. However, you still need to wait until December 14 when the actual shipments start but if you hurry up and pre-order you can get the phone for £100 off. Otherwise, the actual price of the phone is £799 and can be found on Asus' official website. Unfortunately, though, there's still no word on the accessories and how much will they cost. We guess we will have to wait some more to find out.
Post a Comment
Read more