Mar 20, 2008

HTML Header

HTML Header Section

The Header

The HTML header contains several notable items which include:

  1. doctype - This gives a description of the type of HTML document this is.
  2. meta name="description" - This gives a description of the page for search engines.
  3. meta name="keywords" - This line sets keywords which search engines may use to find your page.
  4. title - Defines the name of your document for your browser.

The header in our example document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="GENERATOR" content="Arachnophilia 3.9">
   <meta name="description" content="Comprehensive Documentation and
 information about HTML.">
   <meta name="keywords" content="HTML, tags, commands">
   <title>The CTDP HTML Guide</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

The <!DOCTYPE> Line

The <!DOCTYPE> line is used to define the type of HTML document or page. It has no ending tag. The three document types that are recommended by the World Wide Web Consortium (W3C) are:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    This implies strict adherence with HTML 4 standards.
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
    This supports frameset tags. Some documentation claims this sets strict adherence with HTML 4 standards, however by using HTML validators for testing, I concluded that this is the same as Transitional with frameset support.
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    This is used to support depreciated HTML 3.2 features. It does not support frames.

Note: I have noticed that capitalization is important in the document type declaration. Not all validators will recognize lower case when the text "-//W3C//DTD HTML 4.01//EN" is "-//w3c//dtd html 4.01//en". Therefore it is best if you use the upper case values as in the example above.

Elements in the Header

Elements allowed in the HTML 4.0 strict HEAD element are:

  • BASE - Defines the base location for resources in the current HTML document. Supports the TARGET attribute in frame and transitional document type definitions.
  • LINK - Used to set relationships of other documents with this document.
  • META - Used to set specific characteristics of the web page and provide information to readers and search engines.
  • SCRIPT - Used to embed script in the header of an HTML document.
  • STYLE - Used to embed a style sheet in the HTML document.
  • TITLE - Sets the document title.

The additional element allowed by the HTML 4.0 transitional standard is:

  • ISINDEX (Depreciated) - Allows a single line of text input. Use the INPUT element rather than ISINDEX.

The <META> Element

The <META> element is used to set specific characteristics of the web page and provide information to readers and search engines. It has no ending tag. Attributes

  • http-equiv - Possible values are:
    • refresh - The browser will reload the document after the specified seconds specified with the CONTENT value have el lapsed. Ex: <META HTTP-EQUIV=refresh CONTENT=45>
    • expires - Gives the date that content in the document is considered unreliable.
    • reply-to - A an email address of the responsible party for the web page. This attribute is not commonly used. Ex: <META HTTP-EQUIV=reply-to CONTENT="ctdp@tripod.com">
  • name - Provides non-critical information about the document possibly useful to someone looking at it. Possible values are:
    • author - The person who made the page or the HTML editor name . Ex: <META NAME=author CONTENT="Mark Allen">
    • description - An explanation of the page or its use, used by search engines at times to provide a page summary. Ex: <META NAME=description CONTENT="The CTDP Home Page">
    • copyright - A copyright notice for the page. Ex: <META NAME=copyright CONTENT="Copyright 2000, Mark Allen">
    • keywords - A list of keywords which are separated by commas. These keywords are used by search engines. EX: <META name="keywords" content="computer documentation, computers, documentation, computer help">

This section is very important if you want your web page to be found by search engines. Please note that keywords are separated by commas, not spaces and that the words "computer documentation" are treated by search engines as one word. If someone enters the phrase "computer documentation" when doing a search, it gives the web page a much greater chance of being found than just having the separate keywords "computer" and "documentation".

    • date - <META name="date" content="2000-05-07T09:10:56+00:00">
  • content - Specifies a property's value such as the content of this document is text/HTML.
  • scheme - Names a scheme to be used to interpret the property's value.

The <BASE> Element

This element defines the way relative hyper links are handled in the body of the document. It has no ending tag. It supports the TARGET attribute in frame and transitional document type definitions. Only one BASE element may exist in the header.

If you copy the websites page from the CTDP website at http://ctdp.tripod.com/websites.html to your website at http://yoursite.yourwebserver.com/websites.html, then any relative links on the copied page will try to link to the http://ctdp.tripod.com page rather than the http://yoursite.yourwebserver.com page and you may get the "file not found" error from your browser. Inserting the <base> tag into the copied page will fix the problem.

<base href="http://www.comptechdoc.org/">

Without this tag, if there were a relative link to "linux/index.html" on this page, the user's web browser would look for the file in "http://yoursite.yourwebserver.com/linux/index.html" which would not exist unless it were also copied over and placed at the same relative location on your website.

The <LINK> Element

Used to set relationships of other documents with this document. For example a style sheet that is used to control element style (as in the above example) may be defined with this element. Attributes:

  • CHARSET - The character encoding of the link. An example is "ISO-8859-1".
  • HREF - The location and name of the resource.
  • HREFLANG - Describes the expected language. An example value is "en" for English.
  • MEDIA - Describes the type of display the content is designed for. Possible values include all, aural, braille, handheld, projection, print, screen, tty, and tv.
  • REL - Relationship to the linked resource.
  • REV - Relationship from the linked resource to the document. Possible values of REL and REV include alternate, appendix, stylesheet, bookmark, chapter, contents, copyright, glossary, help, index, next, prev, start, section, and subsection. The value "made" supported by HTML 3.2 is not supported by HTML 4.0.
  • TYPE - Describes the expected content of the resource the link points to. Typical values include application/java, text/html, text/css, image/jpeg, and text/javascript.

An additional attribute allowed by the HTML 4.0 transitional standard is:

  • TARGET - Specifies the frame target the referenced page will be put into. The target may me a named window or one of the special reserved names below. If the target is a named window that exists the web page the link points to will be loaded into that window. If a window by that name does not exist, a new window with that name will be created.
    • _blank - The web linked page loads in a new window and does not name the window.
    • _parent - The new page will load in the parent frame or window.
    • _self - The new page will load in the same window that the link is in. If the link is in a frame, it will load inside the frame. This is the default target.
    • _top - The new page will load into the top window reguardless of how many framesets deep the link is embedded.

An example:

<link href="style.css" rel="stylesheet" type="text/css">

The <TITLE> Element

The text between the <title> and </title> tags is the title of the document.

An example:

<title>The CTDP HTML Guide</title>

The <SCRIPT> Element

Used to embed script in the header of an HTML document. Attributes:

  • CHARSET - The character encoding of the script such as "ISO-8859-1".
  • DEFER - The script will not be parsed until the document is loaded.
  • LANGUAGE - Describes the name of the script language.
  • SRC - The external location where the script may be. In this case the script in not includes in between the SCRIPT tags, but an external file is loaded.
  • TYPE - Describes the content type of the script language.

The <STYLE> Element

This element is used to embed a style sheet in the HTML document. Attributes:

  • MEDIA - Same as described in the LINK element above.
  • TITLE - The style sheet title
  • TYPE - The content type.

If this element is used an external style sheet is not used as can be done using the LINK element, above. The style sheet information is embedded between the <style> and </style> tags.

No comments:

Post a Comment

Popular Posts