The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

HTML Meta Tags Tutorial

 

Meta Tag Purposes ...

Traditionally, META Tags usage fell into two broad categories. The first was to provide a container for information that could be accessed by external User Agents and the second was to provide an element of remote control. In more recent times the META Tag has acquired some interesting new uses that have been introduced by Microsoft and only work in Microsoft browsers.

The first usage of the META Tag is to act as a container for information that can be accessed by external User Agents and this category uses the primary attribute NAME. The second usage of the meta tag to instruct the browser to do something specific and this category uses the primary attribute HTTP-EQUIV. Microsoft have now introduced a third category that has to do with the display on a web page and this category uses the primary attributes PAGE-ENTER and PAGE-EXIT. Studying the attributes and their uses listed on this page should help to give you a feel for the different categories.

Meta Tag Placement ...

META Tags should be located in the HEAD Section of your HTML document, normally under the TITLE Tag. However, there has been an occasion when I wanted to use a META Tag with the REFRESH Attribute in the BODY Section of a page. It worked perfectly well but I would recommend placing the META Tag in the HEAD Section unless you have a specific reason for locating it outside the HEAD section.

Meta Tag Attributes

Our list of attributes for the <meta> tag is not exhaustive. There are attributes that we know about that we have not included yet. We also keep finding new attributes or new uses for attributes (e.g. the new Microsoft attributes). As we come across new attributes we will include them on this page. If you cannot find any information that you require on this page then we suggest you try the Associated Links section at the bottom of this page. We obtained or checked a lot of our information at these sites.

Author

One usage of the <meta> tag is as a container for the Web page to store the author's name. External sources (e.g. search engines) can then interrogate Web sites looking for a particular author's name. You should provide a similar statement in the <head> section of your Web pages.

<meta name="Author" content="Gilbert Hadley">

Generator

Typically the name and version number of a publishing tool used to create that web page, to act as a container to record that the page was created by their program. Presumably this enables them to defend their Copyright by knowing if the page was created by their generation program.

<meta name="generator" content="arachnophilia 3.4">

Description and Keywords

Two very important and associated usages. This is the exact format required by a majority of search engines on the Web, when you have submitted the pages in your Web site to them, and they are preparing the search information for their data base. Great care and thought should be taken when composing these two tags. The lines have been broken for easy readability, but this is how I would place then in the head of a Web page anyway.

<meta name="description" value="JavaScript escape sequences from Web-Wise-Wizard">

<meta name="keywords" value="JavaScript, backslash, newline, tab, horizontal tab, embed, embedded, hexadecimal, octel, decimal, reserved, string, escape, sequence, \n, \t, \x, \u, ISO 8859-1, character, quotes, quotation mark, Web author">

Expires

This sets the expiration date & time for the page it is placed on. You can stop your page being cached if you set the expiration date to an earlier date than the present date. The time must be specified in GMT and information on how to specify a time is described in rfc1036.

<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

Pragma

This instructs the Web browser's caches not to cache the current Web document. It generally does not work with intermediate Web caches because the do not parse the document and therefore do not read the instruction.

<meta http-equiv="Pragma" content="no-cache">

Refresh

We now move to a totally different type of usage for the <meta> tag that could have a whole variety of usages. A first example could be to automatically re-direct a Web visitor to a different Web site. Most Web surfers will have clicked a link to visit this or that super site, only to be confronted by a Web page telling them that the Web site has moved, and that they will be transferred in five seconds.

Well, this is the tag that does that particular job. You must however copy this syntax exactly as displayed, whilst entering your own Web address and changing it from 5 seconds to any number of seconds that suits you.

<meta http-equiv="refresh" content="5; url=http://www.newhome.com/oldpage.htm">

Another usage for this tag is to act as an automatic re-direct in an 'index' page. When a visitor reaches your site the server automatically 'serves' the Web site's index page, unless another page is specifically requested.

At this stage you have no idea if the visitor has the latest super 'whizz bang' browser, or an older non-JavaScript browser. You must therefore include a JavaScript 'trap', which will transfer JavaScript enabled browsers to your 'JavaScript' necessary Home page.

If the visitor's browser is not JavaScript enabled it will fall through the JavaScript trap, and the following line will transfer the visitor to your HTML only Home page. We have included a full script for an index page, which you can view by clicking the link below.

<meta http-equiv="refresh" content="0; url=html-only-page.html">

Yet another usage for the same command is to create a rolling demo of Web pages. Lets presume you placed the line below, into page one of your rolling demo. You then place the same line in page two except you change the target page to page-3.htm. You continue this process until you reach your final page, which you then point back at this page, page-1.htm.

<meta http-equiv="Refresh" content="7; url=page-2.htm">

The example is set to load the next page after 7 seconds but you can change that figure to suit your own needs. The following 'Page-Enter and Page-Exit' section includes a demonstration which uses this rolling demo technique.

<meta http-equiv="Refresh" content="30">

This final example is a straightforward instruction to the Web browser to reload the current document every 30 seconds. This would only be used for documents that have dynamically changing content (e.g. the latest share prices).

Page-Enter and Page-Exit

I recently came across another, quite astonishing usage of the <meta> tag. Unfortunately, it doesn't work in Netscape browsers but it's effects are astonishing in Microsoft v4 browsers, and I presume that the same would apply to Microsoft v5 browsers. I am not sure about Microsoft v3 or earlier browsers.

When entering or leaving a Web page that has these tags included in the script, a whole variety of random 'curtain' effects facilitate an visually pleasing and smooth transition, from the display on one page to the display on the next page. It doesn't appear to work in 'frames' but it is fascinating to view in full windows. For a while maybe, I haven't made my mind up yet.

<meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=23)">

<meta http-equiv="Page-Exit" content="revealTrans(Duration=3.0,Transition=23)">

I will be checking these two usages of the tag in greater detail, because it appears that you can set parameters, presumably to get different effects. In the meantime, why not click the link below to see a demonstration of these usages in action. That is, if you have a suitable Microsoft browser.

Content-Type

This usage allows MIME (Multipurpose Internet Mail Extensions) character set information to be contained in the HTML document. MIME is a standard for multi-part, multimedia electronic mail messages and World-Wide Web hypertext documents on the Internet. MIME provides the ability to transfer non-textual data, such as graphics, audio and fax and it is defined in rfc1341. It uses mimencode to encode binary data into base 64 using a subset of ASCII.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">

Set-Cookie

This sets the name/value pair of a cookie. If you supply an expiration date this cookie will be saved permanently on the client computer.

<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 31-Dec-99 23:59:59 GMT; path=/">

Window-target

Specifies the named window of the current page; can be used to stop a page appearing in a frame with many (not all) browsers. This one specifies the "named window" of the current page, and can be used to prevent a page from appearing inside another framed page. Usually this means that the Web browser will force the page to go the top frameset.

<META HTTP-EQUIV="Window-target" content="_top">

Conclusions

Usages for the <meta> tag must be among the most under documented subjects on the Web. The reason for this would appear to be that the tag is capable of being used as a catch all 'container tag', available for usage and development by third-parties, and not just by the authors of HTML.

I will be keeping a special watch for other uses for this tag, and time permitting I will do some research on the <meta> tag. Anything new and of interest will be included on this page at the next update.

There is a whole range of <meta> tag usage that we have not included here. Much of it will only be understood when you have an actual need for a specific usage. The three links below may be of use when that day arrives.

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - HTML Meta Tags Tutorial META tags fall into three broad categories. The first is to provide information, the second is to provide HTTP Header instructions and the third is to provide special effects in Microsoft browsers.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
HTML Meta Tag Links
 
 
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England