Guide to HTML
Enhanced Document Structure

<html> | <head> | <title> | <base> | <link> | <meta> | <body>

<html>...</html>

Syntax:

<html [lang="language code"]>...</html>

This set of tags denotes the start and end of an HTML document. Therefore, it should be the very first and very last item in an HTML document. (It can only be preceded by the Document Type Definition.) See DTD for more information.

The optional lang attribute specifies the base language of the document. The default code is "unknown". Other examples of possible codes are "en" for english, "en-us" for US english, "de" for German, "nl" for Dutch, or "fr" for French (case insensitive). For more information, see document RFC1766 "Tags for the Identification of Languages", H. Alvestrand, March 1995 (ftp://ds.internic.net/rfc/rfc1766.txt).

Top


<head>...</head>

Syntax:

<head>header info</head>

This denotes the header of the HTML document. The document header should be placed before the document body and should start immediately after the first <html> tag. It typically contains information about the document.

The header should precede the document body.

<html>
<head>
  <title>Document title goes here</title>
</head>
<body>
  Document content goes here
</body>
</html>

See also <title>.

Top


<title>...</title>

Syntax:

<title>title of document</title>

The title, i.e. the text between <title> and </title> can be used by your browser as a name for the current window you are working in.

Note:

Since the name of the document can be used by your browser to build a history of documents visited, you should give your documents a useful name. Also, the title should be context-free. It should be possible to use the title to link to the document without having to add extra information. A bad name would be Annual figures of sales; a better name would be USH Inc. Annual figures of sales.

Sometimes the title is used by search engines when adding the document to their database.

Tip: You should always specify a title for your document.

Tip: Try to keep the title length within reasonable limits. When the title is displayed on the title bar of your browser it may not fit and will be cut off.

Don't: Do not put the document title in the document body.

See also <head>.

Top


<base>

The tag tells your browser that relative URLs in that particular document are based on the URL defined in the tag. A relative URL will be derived from the URL specified, not from the current directory where the document resides.

Syntax:

<base href="URL">

This tag should be placed inside the document header, i.e. between <head> and </head>.

Top


<link>

With this tag, additional document information can be provided. Some of them are useful, others are less useful. Support for this tag is limited. It can be of help for yourself, however, when maintaining your site.

This tag should be placed inside the document header.

Syntax:

<link [rev="option"] [rel="option"] href="URL" [title="title"]>

Options:

rev="made"

Can be used to indicate the author of the document. Href should contain the author's name.

rel="home"

Href can contain the location of the starting page of the site or the location of the external style sheet.

rel="toc"

Href contains the location for the table of content for this site.

rel="index"

Href contains the location of the index for this site. This does not have to be identical to the table of contents. You could, for example, order the index alphabetically.

rel="glossary"

Href contains the location of the glossary (list of words) for this document.

rel="copyright"

Href contains the location of the page with copyright and similar messages.

rel="up"

Href contains the location of the previous document, if applicable.

rel="next"

Href contains the location of the next document, if applicable.

rel="prev"

Href contains the location of the previous document, if applicable.

rel="help"

Href contains the location of a page with help texts to the current document.

href="URL"

Any valid URL.

Top


<meta>

Meta statements can pass on information about the HTML document. They are part of the document header.

Syntax:

<meta name="option" content="text">

Or:

<meta http-equiv="option" content="text">

Meta statements should be placed in the header section of the HTML document. Multiple meta statements are allowed:

<html>
<head>
  <meta>
  <meta>
  <meta>
  <title>Document title</title>
</head>
<body>
  ...
  Document contents
  ...
</body>
</html>

Options:

Name of the author

Syntax:

<meta name="author" lang="language" content="string">

Lang declares the origin of the author's name.

Content contains the name of the document.

Example:

<meta name="author" content="A. Nonymous">

Document description

Syntax:

<meta name="description" content="string">

Put down a brief description of the HTML document in Content. Some search engines use the information entered here to store in their database. If you are using this meta statement, make sure the description is both brief and accurate.

Example:

<meta name="description" content="Guide to HTML">

HTML editor program information

Syntax:

<meta name="generator" content="string">

Used to store information about the program that was used to generate the document.

Example:

<meta name="generator" content="XYZ HTML Editor Version 2.09" >

Document keywords

Syntax:

<meta name="keywords" lang="language" content="string,string,string,...,string">

The lang attribute specifies the language. E.g. "fr" or "en". Some search engines use this meta statement to determine with which keywords your HTML document will show. If you are using this statement, make sure the keywords are accurately chosen.

Example:

<meta name="keywords" content="html guide,html structure">

Expiry date

Syntax:

<meta http-equiv="expires" content="date">

This can be used by caches to determine when to fetch a fresh copy of the associated document.

Example:

<meta http-equiv="expires" content="Mon, 20 Dec 1997 19:00:00 GMT">

Copyright message

Syntax:

<meta name="copyright" content="string">

Include copyright message for the document.

Example:

<meta name="copyright" content="© 1997 Something Inc.">

Date of document

Syntax:

<meta name="date" content="date">

The date the document was created. The date has to be in the following format: yyyy-mm-dd[T]hh-mm-ss[Time zone info]

Example:

<meta name="date" content="1999-08-24T15:01:07-07:00">

Tip: Meta statements are not required in any HTML document, but they can be of help for search engines. Not every search engine uses these meta statements, however.

Top


<body>...</body>

The contents of the document, i.e. the body of the HTML document should be placed between the <body> and </body> codes. The document's body should be placed directly after the header.

You can specify several attributes in the opening <body> code.

Syntax:

<body [attributes]>
  ...
  Document content goes here.
  ...
</body>

Document background ("wallpaper")

Syntax:

<body background="image">

This attribute specifies the image to be used as a background in the current document. You do not need to point to an image on your local system, you can also point to an image on another system. If the background image is not available or cannot be loaded, the specified background color will be used instead.

Example:

<body background="../img/background.gif">
<body background="http://www.domain.com/~user/img/bkgrnd.jpg">

Background color

Syntax:

<body bgcolor="color index number">

This attribute specifies the background color of the document. You should try to match the background color with the background image, if you are using one. This way, if users have the image loading feature disabled they will still be able to read your text pretty much the way you intended.

Example:

<body bgcolor="#122e4f">

Color of normal text

Syntax:

<body text="color">

This attribute specifies the color of the normal text of the document.

Color of unvisited links

Syntax:

<body link="color">

This attribute specifies the color of links that you have not visited previously.

Color of visited links

Syntax:

<body vlink="color">

This attribute specifies the color of links that you have visited previously.

Color of active links

Syntax:

<body alink="color">

This attribute specifies the color of links as they are activated by clicking on them with the mouse (not widely supported).

The above mentioned options can be combined into one statement. A typical body line could look like this:

<body bgcolor="#ffffff" text="#000000" link="#0000ee" vlink="#ee0000" background="grey.jpg">

However, all of these attributes are optional.

The color index number is a six digit hexadecimal code for the values for Red, Green and Blue, i.e. RRGGBB. You can specify the index in three different ways:

  1. "rrggbb"
  2. #rrggbb
  3. Also, a keyword can be used, such as "red", "blue", or "brown".

If you are interested in color codes, take a look at http://www.interport.net/~giant/COLOR/hype_color.html

Don't: Avoid using a large image as a background. You should always be aware of the fact that it takes a while to download the background image.

Don't: Do not specify the same colors for links that have been visited and links that have not been visited. This may confuse readers.

Don't: Don't use more than one body tag in your document.



Paragraph separator