 | Web Design in a Nutshell, 2nd Edition |  |
The <meta> tag has a wide variety of applications, but is primarily used to include information about a document, such as the creation date, author, or copyright information. The data included in a <meta> tag is useful for servers, web browsers, and search engines but is invisible to the reader. It must always be placed within the <head> of the document.
A document may have any number of <meta> tags. There are two types of <meta> tags, using either the name or http-equiv attribute. In each case, the content attribute is necessary to provide a value (or values) for the named information or function. The examples below show basic <meta> tag syntax. In the following sections, we will look at each type of meta tag and its uses.
<META HTTP-EQUIV="name" CONTENT="content"> <META NAME="name" CONTENT="content">
Information provided by an http-equiv attribute is processed as though it had come from an HTTP response header. HTTP headers contain information the server passes to the browser just before it sends the HTML document. It contains MIME type information and other values that affect the action of the browser. Therefore, the http-equiv attribute provides information that will, depending on the tag description, affect the way the browser handles your document.
There are a large number of predefined http-equiv types available. This section will look at just a few of the most useful. For a complete listing, see the Dictionary of HTML META Tags at http://vancouver-webpages.com/META/.
Client-pull refers to the ability of the browser (the client) to automatically request (pull) a new document from the server. The effect for the user is that the page displays, and after a period of time, automatically refreshes with new information or is replaced by an entirely new page. This technique can be used to automatically redirect readers to a new URL (for instance, if an old URL has been retired). Be aware, however, that the W3C strongly discourages the use of this method for automatic forwarding in favor of server-side redirects.
If you string documents with client-pull instructions and set very short time intervals, you can create a sort of slide show effect. Client-pull uses the refresh attribute value, first introduced by Netscape. It tells the browser to wait a specified number of seconds (indicated by an integer in the content attribute) and then load a new page. If no page is specified, the browser just reloads the current page. The following example instructs the browser to reload the page after 15 seconds (we can assume there's something fancy happening on the server side that puts updated information in the HTML document):
<META HTTP-EQUIV="refresh" CONTENT="15">
To reload a different file, provide the URL for the document within the content attribute as shown below:
<META HTTP-EQUIV="refresh" CONTENT="1; URL=http://doc2.html">
Note that there is only a single set of quotation marks around the value for content. Although URLs usually require their own quotation marks, these are omitted within the context of the content attribute.
To create a slide-show effect, add a meta refresh tag in the <head> of each document that points to the next HTML document in the sequence. You can set the time interval to as many seconds as you like; setting it to 0 will trigger the next page as soon as the current page has downloaded. Bear in mind, however, that the actual amount of time the page takes to refresh is dependent on complex factors of file size, server speed, and general web traffic.
In the following example, three files are coded to loop endlessly at five-second intervals.
Document 1.html contains:
<META HTTP-EQUIV="refresh" CONTENT="5; URL=2.html">
Document 2.html contains:
<META HTTP-EQUIV="refresh" CONTENT="5; URL=3.html">
Document 3.html contains a tag which points back to 1.html :
<META HTTP-EQUIV="refresh" CONTENT="5; URL=1.html">
Here are some other uses of the http-equiv attribute:
Indicates the date and time after which the document should be considered expired. Web robots may use this information to delete expired documents from a search engine index. The date and time format (as shown below) follows the date/time standard for HTTP headers (rather than the recommended date/time format for HTML[2]) since the http-equiv attribute is intended to mimic an HTTP header field.
[2]The date and time format for HTML values is described under the listing for <del> in Chapter 10, "Formatting Text".
<META HTTP-EQUIV="expires" CONTENT="Wed 12 Jun 2001 10:52:00 EST">
The content-type text/html is automatically added to the HTTP header for HTML documents. This attribute can be extended to include the character set for the document by specifying "text/html; charset=character set identifier". This causes the browser to load the appropriate character set before displaying the page.
This is part of the HTML 4.01 measures to internationalize the Web. You can read more about identifying character sets in Chapter 7, "Internationalization".
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=SHIFT_JIS">This may be used to identify the language in which the document is written. Like the character set extension just mentioned, it is part of the ongoing effort to internationalize the Web. The browser can send a corresponding Accept-Language header, which causes the server to choose the document with the appropriate language specified in its <meta> tag.
For more information on internationalization and a listing of two-letter language codes, see Chapter 7, "Internationalization".
This example tells the browser that the document's natural language is French:
<META HTTP-EQUIV="content-language" CONTENT="fr">
The name attribute is used to insert hidden information about the document that does not correspond to HTTP headers. For example:
<META NAME="author" CONTENT="Jennifer Niederst"> <META NAME="copyright" CONTENT="2001, O'Reilly & Associates">
You can make up your own <meta> names or use one of the names put forth by search engine and browser companies for standardized use. A few of the accepted and more useful <meta> names are discussed in the following sections.
The popular search engines Infoseek and AltaVista introduced several <meta> names that aid their search engines in finding pages. Note that not all search engines use meta data, but adding them to your document won't hurt. There is a blurry distinction between name and http-equiv in this case, so most of these meta names also work as http-equiv definitions.
This provides a brief, plain-language description of the contents of your web page, which is particularly useful if your document contains little text, is a frameset, or has extensive scripts at the top of the HTML document. Search engines that recognize the description may display it in the search results page. Some search engines use only the first 20 words of descriptions, so get to the point quickly.
<META NAME="description" CONTENT="Jennifer Niederst's resume
and web design samples">You can supplement the title and description of the document with a list of comma-separated keywords that would be useful in indexing your document.
<META name="keywords" content="designer, web design, training,
interface design">Identifies the copyright information for the document.
<META NAME="copyright" CONTENT="2001, O'Reilly & Associates">
This tag was created as an alternative to the robots.txt file, and both are used to prevent your page from being indexed by search engine "spiders." This tag is not as well supported as the robots.txt file, but some people like to include it anyway. The content attribute can take the following values: index (the default), noindex (prevents indexing), nofollow (prevents the search engine from following links on the page), and none (the same as setting "noindex, nofollow"). The advantage of using this attribute instead of the robots.txt file is that it can be applied on a page-by-page basis (whereas robot.txt applies to an entire site if it's located in the root directory).
<META NAME="robots" CONTENT="noindex, nofollow">
Other uses of the name attribute include the following:
|  | |
| 9.3. Global Settings with the <body> Tag |  | 10. Formatting Text |
Copyright © 2002 O'Reilly & Associates. All rights reserved.