Web Design |
the <meta> tag |
||
main menushelp pagesprinter-friendly/text-only version
|
general information<meta> tags appear in the document header and an HTML file can have any number of them. Their appearance in the header indicates that they define information about the page rather than content. Their primary use is to pass information about the page to search engines and other webpages. That particular application is described in more detail on the page about search engines (and in the virtual lecture). This page covers <meta> tags in general terms. Though they have no obvious effect as far as the reader is concerned (with one exception, detailed below), you should definitely understand these tags if you intend to publish your pages on the Web. The formatting of <meta> tags is a little confusing. There are two formats: <meta http-equiv="name" content="content"> For a full listing of <meta> tags, see the <meta> tags dictionary. The link will open in the second browser window. The difference between the two formats is that the first, with the http-equiv attribute, contains information which the server passes to the browser, and which affect the way the browser handles your document. name attributes pass more general descriptive information, which don't bother the browser in the least, but do help your page get detected by search engines. As noted, those applications are discussed on that other page. The main uses of <meta> tags are as follows; the last two have their own sections in this page so click on the links to read more.
character sets and languagesTechnically, this section covers things that can be handled in places other than the <meta> tag. You might remember the lang attribute making a brief appearance in the initial page template you were presented with on the head and body page. This tells the browser the language of the text within the tags. Normally you would define lang in the <html> tag, which means it applies to the whole page, but you can also define lang within shorter passages, as small as one word perhaps (if you wanted to define a lang in an inline sense, without any other formatting being applied, include it as an attribute in a <span> tag). Why include this? Firstly because some browsers, used mainly (though not exclusively) by users with vision problems, work by translating your text into sound through a speech synthesiser, and it helps them with pronounciation. See the page on non-visual browsers for more details. Secondly, the search engine Google can be programmed to search only for pages or passages in particular languages, and this is how it knows. It also gives a bit of help to you, the designer, as it makes it easier to validate your page. Here's a link to a list of all available two-letter language codes. Incidentally if anyone's actually heard of all the languages on this list (be honest), mail me for a special prize. This information can also be passed via a <meta> tag, and if so is specifically directed at search engines. And bear in mind that some languages, though they may be transliterated into the Latin alphabet, may require different character sets (alphabets): in fact of the "major world languages" highlighted on the page with the codes, only the European languages and Swahili are normally rendered in the Latin alphabet. For everything else you should tell the browser that it'll need to load up a particular character set. The <meta> tags at the top of this document are as follows:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> The second content attribute will change whenever the language changes. The value of the first will change only if a character set other than Latin will be needed. We are getting past the scope of this web site here, unfortunately. For more info, try chapter 27 of Niederst's Web Design in a Nutshell: better still, spend another 10 credits and enrol yourself on the module ACOM1075: Multilingual Computing. redirectionRedirection is performed with http-equiv="refresh". The effect for the user is that the page displays, then after a defined period of time automatically refreshes with new information or is replaced by an entirely new page. This is useful for redirecting readers elsewhere, particularly if you are moving a page to another URL. You can do creative things with this as well, perhaps creating a sort of "slide show". Each of these pages has the following line between the <head> and </head> tags (with the URL of the next page in each case): <meta http-equiv="refresh" content="5; url=refresh2.html"> Two things: first, the number 5 defines the number of seconds until the page refreshes, and second do check the arrangement of the quotation marks around the content and url attributes. If no new page is specified, the browser simply reloads the current page. (This might seem pointless but for pages that get updated very frequently, like stock market prices for example, it is extremely important.) Also bear in mind that the exact timing of refreshments depends also on download speed, file size and so on. Don't use it it on pages which contain a lot of text! Remember people may not always read as fast as you, particularly not if their first language isn't English (or whatever language your page is written in), and/or if they use alternative forms of display such as speech synthesisers. It is always best to leave as much browsing as possible in the control of the visitor, and in most cases, get them to decide when they will move on from a page. The most useful application of this technique is if, for whatever reason, you've had to move your site from one URL to another. Pop one of these in the head of the front page at the old URL and you can redirect people automatically. (Of course, if your URL's changed because you've left a web host - like Leeds Uni - and/or you no longer have access to a given URL, you just have to lump it.) In this case it's a good idea to put a "manual" link in as well, just in case the redirect fails for whatever reason. This site was formerly located at http://www.leeds.ac.uk/acom/html; if you visit that page now you'll see there's a redirect back to the front page of this site which includes an ordinary link, just in case. | ||
Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.