This chapter is from the book
This chapter is from the book
This chapter is from the book
Meta Tags
Finally, you get to do something with the <head> tag. So far, you've only seen the <title> tag used to give information about the document, but you can do a lot more with the <head> tag. What's more, aside from the <title> tag, information in the <head> tag doesn't usually appear in your document. You can use the meta information tag (<meta>) to identify the page's author, keywords used for searching, or a brief description to appear in search results. You also can use the <meta> tag to give commands to the browser. You can use as many <meta> tags as you like in your page. You'll learn how in the sections that follow.
Improved Searching
Search engines (as you'll find in Lesson 17, "Planning for the Future") add the content of your Web pages to their indexes. When a potential visitor enters a search phrase, the search engine checks its index to find that word and returns any pages that include that word. It works great. But, what if you were a realtor and you worked hard at creating a Web page that included the words houses, housing, sale, and buy; but didn't include the phrase real estate? If that was the phrase your visitor was looking for, they would never find your page.You can use the <meta> tag to include product names, geographic locations, industry terms, and synonyms that people might be searching for. There are three <meta> tags that work to help improve your chances of being found by a search engine:
- Keywords Keywords are words that you feel people might use to search for your Web page, or synonyms for words that appear in your document.
- Description This is usually a paragraph of information about your page. Some search engines use the information in this tag to summarize your page, but other search engines use the first few lines of text in your actual document.
- Author This is your opportunity to shine. Just in case someone is searching for your name, they will find your page if you enter that information into the <meta> tag.
Meta information for search engines comes in pairs: name and contents. The following HTML code includes meta information pairs for each of the preceding <meta> tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Your HTML Page</title> <meta name="keywords" contents="words that people might use to search for your page." /> <meta name="description" contents="a brief paragraph describing your document." /> <meta name="author" contents="your name" /> </head> <body> <p>Insert your text here.</p> </body> </html>
Refresh and Redirect
There might be times when you want to replace one page with another or want to redirect a link. You might, for example, choose to include a splash page on your Web site. You can use the meta information to force the page to change within a given time span using the sample code that follows:
<meta http-equiv="refresh" content="time in seconds,
URL of the new page" />
If you have a page that you update several times a day and you want to make sure that people always see the most recent version, you can enter the page's own URL in the refresh tag. When the browser sees the refresh tag, it presents the requested URL in the specified time.
<meta http-equiv="refresh" content="time in seconds,
URL for this page" />
Expiration Dates
If you have a page that you change frequently, you can specify an expiration date in the <meta> tag to ensure that the Web browser looks for a newer version (rather than displaying an older version, which might still be stored in the browser's memory). Look at the example that follows:
<meta http-equiv="expires"
contents="Wed, 04 December 2006 00:00:00 GMT" />
When you enter the URL for this page in your browser, it checks its history files to see whether a copy is stored there. If so, it checks the meta information to see whether this page is still valid. If the expiration date has passed, the browser looks to the Web for a more recent copy before displaying the page.
Table 3.3 reminds you of the formatting tags you learned in this lesson.
Table 3.3. HTML Tags Used in This Lesson
|
HTML Tag |
Closing |
Description of Use |
|
<b> |
</b> |
Text appears boldface. |
|
<big> |
</big> |
Text appears one size larger than normal. |
|
<br /> |
Line break. Forces text to the next line. |
|
|
<em> |
</em> |
Text appears emphasized (italic). Usually the same as <i>. |
|
<h1> |
</h1> |
A first-level heading. |
|
<h2> |
</h2> |
A second-level heading. |
|
<h3> |
</h3> |
A third-level heading. |
|
<h4> |
</h4> |
A fourth-level heading. Rarely used. |
|
<h5> |
</h5> |
A fifth-level heading. Rarely used. |
|
<h6> |
</h6> |
A sixth-level heading. Rarely used. |
|
<i> |
</i> |
Text appears emphasized (italic). |
|
<meta /> |
Identifies information about the document. |
|
|
<p> |
</p> |
Paragraph break. Forces a blank line. |
|
<small> |
</small> |
Text appears one size smaller than normal. |
|
<strong> |
</strong> |
Text appears boldface. Same as <b>. |
|
<sub> |
</sub> |
Text appears in subscript. |
|
<sup> |
</sup> |
Text appears in superscript. |
|
<tt> |
</tt> |
Text appears monospaced, as if typed. |
In this lesson, you've learned:
- The <p> tag, or paragraph tag, tells the browser to add a blank line before it displays any text that follows. The <br /> tag moves your text to the next line without adding a blank line.
- HTML enables you to add emphasis to your text with several predefined formatting tags.
- Symbols such as +, –, and % require a little computer shorthand to tell the browser how to interpret these symbols. This shorthand begins with an ampersand (&) and ends with a semicolon (;). A more complete list can be found in Appendix C.
- You can add other languages to your HTML documents by using the lang attribute on the <html> tag.
- Meta information for search engines comes in pairs: name and contents, and the <meta /> tags always appear between the <head> tags.