Setting Up the Document Structure in HTML5

1/26/2001

Contents

Specifying the Document Type
Creating the HTML, Head, and Body Sections
Creating Paragraphs and Line Breaks
Specifying a Page Title and Metatags
Publishing a File to a Server
Key Points

Specifying a Page Title and Metatags

Perhaps you noticed in the preceding exercise that the complete path to the file appeared in the title bar of Internet Explorer. Usually when you view a Web page, a friendly, descriptive title appears in that spot instead. That text is specified by a <title> tag that is placed in the <head> section (also called the header). Here’s an example:

<head>
<title>The Garden Company</title>
</head>

Another element you can place in the header is the <meta> tag. The <meta> tag has several purposes. One of these is to identify keywords related to your page. Placing appropriate keywords on your page can make it easier for people to find your page when they are searching the Web using a search engine such as MSN. When some search engines index your page, they rely not only on the full text of the page, but also on any keywords they find in the <meta> tag area.

For example, suppose The Garden Company’s Web site would be useful to people who are searching for information about all types of gardening problems, such as pests, weeds, and fungus, and about growing flowers and vegetables. Perhaps all these topics are not mentioned on the main page, but you want people who search for those words to be directed to the main page anyway. You could place the following in the <head> section:

<meta name="keywords" content="pests, weeds, fungus, plants, flowers,
vegetables">

Notice that the <meta> tag in the above code is a single-sided tag that contains two attributes: name and content. The values for each of those arguments follow the equals sign and are contained in double quotation marks.

The <meta> tag can also be used to redirect visitors to another page. For example, suppose you told everyone the address of your Web site, and then you needed to move it to another URL. You could place a “We’ve Moved” page at the original address and use the <meta> tag to redirect users to the new address after five seconds, like this:

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

Here’s yet another common use: the <meta> tag can specify a character encoding scheme. This is not a big issue if you are coding only in English (or in a language like English that uses a Roman character set), but it is considered a tidy coding practice to include anyway. If you want, you can add <meta charset=“utf-8”> to the <head> section of your document to explicitly spell out that your page is in English.

In this exercise, you will add a page title and some keywords to the index.htm page you created in the preceding exercise.

Between the <head> and </head> tags, type the following to create the page title:
```
<title>The Garden Company</title>
```

After the title, type the following <meta> tag:

<meta name="keywords" content="pests, weeds, fungus, plants, flowers,
vegetables">

Press Enter to start a new line, and type the following <meta> tag:
```
<meta encoding="utf-8">
```
Save your work, and then view the file in Internet Explorer.

The tab displays the site name, but notice that the inclusion of the <meta> tags caused no apparent difference in the displayed text of the page. This is because the keywords and encoding specification do not appear on the Web page itself.

Click to view larger image