Adding a Document Header - HTML 4

The head of an (X)HTML document is one of the two main components of a document. (The body of the document is the other main component.) The head, or header, provides basic information about the document, including its title and metadata (which is information about information), such as keywords, author information, and a description. If you’re going to use a style sheet with your page, you include information about that style sheet in the header.

The <head> element, which defines the page header, immediately follows the <html> opening tag:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

<html > <head> </head></html>

Giving your page a title
Every (X)HTML page needs a descriptive title that tells the visitor what the page is all about. This title appears in the title bar at the very top of the browser window, as shown in Figure. The page title should be concise yet informative. (For example, My home page isn’t nearly as informative as Ed’s IT
Consulting Service.)

You define the title for your page by using the <title> element inside the <head> element:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”<head><title>Ed’s IT Consulting Service</title></head></html>

Figure : (X)HTML page titles appear in a Web browser’s window title bar.

(X)HTML page titles appear in a Web browser’s window title bar.

Search engines use the contents of the <title> bar when they list Web pages in response to a query. Your page title may be the first thing that a Web surfer reads about your Web page, especially if she finds it through a search engine. A search engine will most likely list your page title with many others on a search results page, which means that you have one chance to grab the Web surfer’s attention and convince her to choose your page. A well-crafted title can accomplish that.

The title is also used for Bookmarks and in a browser’s History; therefore, keep your titles short and sweet.

Defining metadata
The term metadata refers to data about data; in the context of the Web, it means data that describes the data on your Web page. Metadata for your page may include

  • Keywords
  • A description of your page
  • Information about the page author
  • The software application you used to create the page

Elements and attributes
You define each piece of metadata for your (X)HTML page with

  • The <meta /> element
  • The name and content attributes

For example, the following elements create a list of keywords and a description for a consulting-service page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
<head>
<title>Ed’s IT Consulting Service</title>
<meta name=”keywords” content=”IT consulting, MCSE, networking guru” />
<meta name=”description” content=”An overview of Ed’s skills and services” />
</head>
</html>

Custom names
The (X)HTML specification doesn’t

  • Predefine the kinds of metadata you can include in your page
  • Specify how to name different pieces of metadata, such as keywords and descriptions

So, for example, instead of using keywords and description as names for keyword and description metadata, you can just as easily use kwrd and desc, like the following markup:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”<html > <head><title>Ed’s IT Consulting Service</title><meta name=”kwrd” content=”IT consulting, MCSE, networking guru” /><meta name=”desc” content=”An overview of Ed’s skills and services” /></head></html>

If you can use just any old values for the <meta> element’s name and content attributes, how do systems know what to do with your metadata? The answer is — they don’t. Each search engine works differently. Although keywords and description are commonly used metadata names, many search engines may not recognize or use other metadata elements that you include.

Many developers use metadata to either

  • Leave messages for others who may look at the source code of the page
  • Prepare for future browsers and search engines that use the metadata

Although keywords and page descriptions are optional, search engines commonly use them to collect information about your Web site. Be sure to include detailed and concise information in your <meta /> tag if you want your Web site discovered by search engine robots.

Automatically redirecting users to another page
You can use metadata in your header to send messages to Web browsers about how they should display or otherwise handle your Web page. Web builders commonly use the <meta /> element this way to automatically redirect page visitors from one page to another. For example, if you’ve ever come across a page that says This page has moved. Please wait 10 seconds to be automatically sent to the new location. (or something similar), you’ve seen this trick at work.

To use the <meta /> element to send messages to the browser, here are the general steps you need to follow:
1. Use the http-equiv attribute in place of the name attribute.
2. Choose from a predefined list of values that represents instructions for the browser.

These values are based on instructions that you can also send to a browser in the HTTP header, but changing an HTTP header for a document is harder than embedding the instructions into the Web page
itself.

To instruct a browser to redirect users from one page to another, here’s what you need to do in particular:

  • Use the <meta /> element with http-equiv=”refresh”.
  • Adjust the value of content to specify how many seconds before the refresh happens and what URL you want to jump to.

For example, the line shown in bold in the following markup creates a refresh that jumps to www.w3.org after 15 seconds:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

<html><head><title>All About Markup</title><meta http-equiv=”refresh” content=”15; url= http://www.w3.org/” /></head><body><p>Please wait 10 seconds to be automatically redirected to the W3C.</p></body></html>

Older Web browsers may not know what to do with <meta /> elements that use the http-equiv element to create a redirector page. Be sure to include some text and a link on your page to enable a visitor to link manually to your redirector page if your <meta /> element fails to do the job.

If a user’s browser doesn’t know what to do with your redirector information, the user simply clicks the link in the page body to go to the new page, as shown in Figure.

Figure : When you use a <meta /> element to create a page redirector, include a link in case the redirector fails.

When you use a <meta /> element to create a page redirector, include a link in case the redirector fails.

You can use the http-equiv attribute with the <meta /> element for a variety of other purposes, such as setting an expiration date for a page and specifying the character set (the language) the page uses.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics