HTML/Head Elements

From The Ultimate Programming Reference

---

Contents 1 TITLE 1.1 Attributes 1.2 Contains 1.3 Contained In 1.4 Discription 2 STYLE 2.1 Attributes 2.2 Contains 2.3 Contained In 2.4 Discription 3 SCRIPT 3.1 Attributes 3.2 Contains 3.3 Contained In 3.4 Discription 4 META 4.1 Attributes 4.2 Contains 4.3 Contained In 4.4 Discription 5 LINK 5.1 Attributes 5.2 Contains 5.3 Contained In 5.4 Discription

[edit] TITLE

Document Title

[edit] Attributes

• internationalization attributes

[edit] Contains

• Plain text (including entities)

[edit] Contained In

HEAD

[edit] Discription

The TITLE element gives the document's title. Each document must have exactly one TITLE within the HEAD. TITLE contains plain text and entities; it may not contain other markup.

A good TITLE should be short and specific to the document's content so that it can be used as a title for a user's bookmark, a title for the display window on visual browsers, and a link from a search engine. A suggested limit for the number of characters in a TITLE is 60.

---

[edit] STYLE

Embedded Style Sheet

[edit] Attributes

• TYPE=ContentType (content-type of style language)
• MEDIA=MediaDesc (media to apply style to)
• TITLE=Text (title of style sheet)
• internationalization attributes (for the TITLE)

[edit] Contains

An embedded style sheet

[edit] Contained In

HEAD

[edit] Discription

The STYLE element embeds a style sheet in the document. Any number of STYLE elements may be contained in the HEAD of a document.

The required TYPE attribute of STYLE is used to specify the Internet media type of the style language. For Cascading Style Sheets, the TYPE attribute value should be text/CSS.

The optional TITLE attribute gives a title for the style sheet. Without a TITLE attribute, the style sheet is always applied when style sheets are enabled. With a TITLE attribute, the style sheet is automatically applied but the user may choose to disable the style sheet while keeping or enabling other style sheets. Style sheets with the same title are considered to be the same style sheet.

Most current browsers ignore the TITLE attribute on style sheets and do not allow the user to selectively enable or disable individual style sheets.

The MEDIA attribute specifies the media on which the style sheet should be applied. This allows authors to restrict a style sheet to certain output devices, such as printers or aural browsers. The attribute's value is a comma-separated list of media descriptors. The following media descriptors are defined in HTML 4.0 and are case-sensitive:

• screen (the default), for non-paged computer screens;
• tty, for fixed-pitch character grid displays (such as the display used by Lynx);
• tv, for television-type devices with low resolution and limited scrollability;
• projection, for projectors;
• handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth);
• print, for output to a printer;
• braille, for braille tactile feedback devices;
• aural, for speech synthesizers;
• all, for all devices.

Netscape Navigator 4.x incorrectly ignores any STYLE element with a MEDIA value other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all. Most other browsers ignore the MEDIA attribute.

An example of an embedded style sheet follows:

<STYLE TYPE="text/css" MEDIA=screen>
<!--
  BODY  { background: url(foo.gif) red; color: black}
  P EM  { background: yellow; color: black }
  .note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>

Pre-HTML 3.2 browsers, unaware of the STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheet visible to the user. To prevent this, style languages like CSS allow the style sheet to be contained within an SGML comment (), as in the preceding example.

An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

---

[edit] SCRIPT

Client-side Script

[edit] Attributes

• TYPE=ContentType (content-type of scripting language)
• LANGUAGE=CDATA (scripting language name)
• SRC=URI (external script location)
• CHARSET=Charset (character encoding of external script)
• DEFER (script execution may wait)

[edit] Contains

An embedded script

[edit] Contained In

HEAD, block-level elements, inline elements except SELECT and SCRIPT

[edit] Discription

The SCRIPT element includes a client-side script in the document. Client-side scripts allow greater interactivity in a document by responding to user events. For example, a script could be used to check the user's form input prior to submission to provide immediate notice of any errors by the user.

Note that not all browsers support client-side scripting, and supporting browsers allow the user to disable scripting, so authors should avoid dependence on client-side scripting wherever possible. The NOSCRIPT element can be used to provide content for browsers that do not support client-side scripting or have it disabled. In the case of form validation, any error checking done by the client-side script should be repeated by the CGI script or Java servlet that handles the submission at the server.

Also note that different browsers support different variants of scripting languages with different bugs. Authors are encouraged to check their scripts on as many browsers as possible. Browsers that support client-side scripting include Netscape Navigator 2.0 and up, Microsoft Internet Explorer 3.0 and up, and Opera 3.0 and up.

The required TYPE attribute of SCRIPT specifies the media type of the scripting language, e.g., text/javascript. However, many browsers only support the deprecated LANGUAGE attribute, which specifies the language name. Examples of supported LANGUAGE values include JavaScript, JavaScript1.1, and VBScript. The values are not case sensitive.

Browsers will ignore scripts with LANGUAGE values that they do not support. For example, Netscape Navigator 3.0 will execute scripts with LANGUAGE="JavaScript" or LANGUAGE="JavaScript1.1" but will ignore scripts with LANGUAGE="JavaScript1.2" or LANGUAGE="VBScript".

In the absence of the LANGUAGE attribute, browsers that do not support the TYPE attribute typically assume that the language is the highest version of JavaScript supported by the browser. Thus authors may safely omit the deprecated LANGUAGE attribute when using JavaScript.

An embedded script is given as the content of the SCRIPT element. The SRC attribute allows authors to reuse code by specifying an external script. The optional CHARSET attribute gives the character encoding of the external script (typically ISO-8859-1). When the SRC attribute is used, the embedded script is ignored. An example follows:

<SCRIPT TYPE="text/javascript" SRC="foo.js" CHARSET="ISO-8859-1">
<!--
  // embedded script ignored//
 -->
</SCRIPT>

Netscape Navigator requires that external scripts be served with a Content-Type of application/x-javascript.The DEFER attribute indicates that the browser may wait to parse the script until the rest of the document has been rendered. Scripts that use DEFER must not generate any document content, and should not be required to respond to user events (e.g., form submission) that may occur while the document is loading. The DEFER attribute can be useful for delaying scripts that pre-load images or harass the user with scrolling messages in the status bar, though current browsers do not generally support this attribute.

The SCRIPT element may occur any number of times in the document HEAD or BODY. Typically the SCRIPT element is used in the HEAD unless it generates BODY content.

Pre-HTML 3.2 browsers, unaware of the SCRIPT element, will treat the content of SCRIPT as normal HTML. To make these browsers ignore the SCRIPT's content, scripting languages generally allow SGML comments to be used around an embedded script. For example:

<SCRIPT TYPE="text/javascript">
<!-- comment to end of line
  document.write("foo");
// comment to end of line -->
</SCRIPT>

Note that "-->" is contained within a JavaScript single-line comment (started with two slashes).

Technically, the first occurrence of "</" followed by any letter is considered the end tag for the SCRIPT element. While browsers are forgiving in this, authors should avoid using strings such as "</P>" in their embedded scripts. JavaScript allows authors to use a backslash to avoid ending the SCRIPT element prematurely, e.g., document.write("</P>").

---

[edit] META

Metadata

[edit] Attributes

• NAME=Name (property name)
• HTTP-EQUIV=Name (HTTP response header name)
• CONTENT=CDATA (associated data)
• SCHEME=CDATA (form of data)
• internationalization attributes (for the CONTENT)

[edit] Contains

Nothing (Empty)

[edit] Contained In

HEAD

[edit] Discription

The META element provides metadata such as a document's keywords, description, and author. Any number of META elements may be contained in the HEAD of a document.

META's NAME attribute provides a property name while the CONTENT attribute gives the corresponding value. The CONTENT attribute value may contain text and entities, but it may not contain HTML tags.

The optional SCHEME attribute gives the format of the property value. For example, a date property may require SCHEME="Month-Day-Year" to disambiguate the date from other formats such as SCHEME="Day-Month-Year".

There is no standard list of META properties, so authors may define whatever metadata they like. The following example defines the author of the document:

<META NAME=author CONTENT="Liam Quinn">

Some search engines use keywords and description properties, giving extra weight to a document's keywords and providing its description with the link to the document. Example:

<META NAME="description" CONTENT="A description of HTML 4.0's META element for metadata.">
<META NAME="keywords" CONTENT="META, meta element, metadata, metainformation, meta data, meta information, keywords, description, refresh, HyperText Markup Language, HTML, HTML4, HTML 4.0, Web Design Group, WDG, <meta> tag, <META> tag">

To avoid being truncated by search engines, the description should be brief--no more than 200 characters. Keywords are separated by commas and may be considered case sensitive by search engines. If the same keywords are repeated too often in the META element, some search engines will not index the document. Search engines typically only process the first 1000 characters of the keywords list.

Some search engines also support the robots property for indicating whether a document should be indexed and whether its links should be followed. The associated CONTENT value is a comma-separated list of case-insensitive directives:

index specifies that the page should be indexed while noindex specifies that it should not be indexed; follow specifies that the page's links should be followed while nofollow specifies that they should not be followed; all is equivalent to index,follow (the default value); none is equivalent to noindex,nofollow. For example, the following META element tells search engines and other robots not to index the page but to follow links on it:

<META NAME=robots CONTENT="noindex,follow">

Few search engines support the robots property at this time. For greater compliance by robots, authors should use the Robots Exclusion Protocol if possible.

The HTTP-EQUIV attribute may be used in place of the NAME attribute to indicate that the property is an HTTP header. Some servers will send the HTTP header specified in the META element, and browsers often recognize the header even when it is not sent by the server. Examples:

<META HTTP-EQUIV=Expires CONTENT="Sun, 22 Mar 1998 16:18:35 GMT">
    sets the expiry date of the document.
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
    sets the client-side scripting language for inline scripts to JavaScript.
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/CSS">
    sets the style language for inline styles to CSS.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
     sets the character encoding for the document to SHIFT_JIS (a Japanese encoding). Note that using META
     for this purpose rather than a true HTTP header causes some browsers to redraw the page after initially
     displaying it.
<META HTTP-EQUIV=Refresh CONTENT="10; URL=http://www.htmlhelp.com/">
     tells the browser to load http://www.htmlhelp.com/ 10 seconds after the current document has finished
     loading. Not all browsers support this, so authors should provide an alternate means of moving to the
     new page where necessary. The Refresh header is sometimes used for "splash screens" or when a page has
     moved, but the technique is not very effective since users may not even be looking at the window that
     is to be refreshed and since it messes up the user's history on many browsers. Some search engines
     penalize pages that use a Refresh of a few seconds or less. 

---

[edit] LINK

Document Relationship

[edit] Attributes

• REL=LinkTypes (relationship to link)
• REV=LinkTypes (relationship from link)
• HREF=URI (hypertext reference)
• TYPE=ContentType (content-type of link)
• TARGET=FrameTarget (frame to render link in)
• MEDIA=MediaDesc (media appropriate for link)
• HREFLANG=LanguageCode (language of link)
• CHARSET=Charset (character encoding of link)
• common attributes

[edit] Contains

Nothing (Empty)

[edit] Contained In

HEAD

[edit] Discription

The LINK element defines document relationships. Any number of LINK elements may be contained in the HEAD of a document. Many browsers lack support for LINK, so authors should not depend on the browser making the links available to the user.

The REL and REV attributes define the nature of the relationship between the documents and the linked resource. REL defines a link relationship from the current document to the linked resource while REV defines a relationship in the opposite direction. For example,

<LINK REL=Glossary HREF="foo.HTML">

indicates that foo.html is a glossary for the current document while

<LINK REV=Subsection HREF="bar.html">

indicates that the current document is a subsection of bar.html. The value of the REL and REV attributes is a space-separated list of link types.

Commonly used relationships include the next or previous document in a sequence, the starting page in a collection of documents, a document with copyright information, and information about the author. A document could define these relationships as follows:

<LINK REL=Prev HREF="base.html" TITLE="BASE - Document Base URI">
<LINK REL=Next HREF="meta.html" TITLE="META - Metadata">
<LINK REL=Start HREF="../" TITLE="HTML 4.0 Reference">
<LINK REL=Copyright HREF="/copyright.html" TITLE="Copyright Notice">
<LINK REV=Made HREF="mailto:liam@htmlhelp.com" TITLE="HTML 4.0 Reference Feedback">

While the value of REL and REV is case-insensitive, the Lynx browser renders the relationship exactly as given by the author. Authors should therefore be consistent in their case, and may wish to capitalize the first letter while using lowercase for the rest.

Authors can also use the LINK element to apply an external style sheet. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute indicates a persistent style.

A preferred style is one that is automatically applied. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.

An alternate style is indicated by REL="Alternate StyleSheet". The user could choose to replace the preferred style sheet with an alternate one, though current browsers generally lack the ability to choose alternate styles.

A single style may also be given through multiple style sheets:

<LINK REL=StyleSheet HREF="basics.CSS" TITLE="Contemporary" TYPE="text/css">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary" TYPE="text/css">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary" TYPE="text/css">

In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, each style sheet's LINK must use the same TITLE.

LINK's MEDIA attribute specifies the media for which the linked resource is designed. With REL=StyleSheet, this allows authors to restrict a style sheet to certain output devices, such as printers or aural browsers. The attribute's value is a comma-separated list of media descriptors. The following media descriptors are defined in HTML 4.0 and are case-sensitive:

• screen (the default), for non-paged computer screens;
• tty, for fixed-pitch character grid displays (such as the display used by Lynx);
• tv, for television-type devices with low resolution and limited scrollability;
• projection, for projectors;
• handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth);
• print, for output to a printer;
• braille, for braille tactile feedback devices;
• aural, for speech synthesizers;
• all, for all devices.

Netscape Navigator 4.x incorrectly ignores any style sheet linked with a MEDIA value other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all. Most other browsers ignore the MEDIA attribute.

The optional HREFLANG and CHARSET attributes of LINK give the language and character encoding, respectively, of the link. The language should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Examples of character encodings include ISO-8859-1, SHIFT_JIS, and UTF-8.

The Alternate link relationship defines an alternate version of the document. Translations of a page can be identified by using REL=Alternate along with the HREFLANG attribute. Versions of the page tailored for specific media can be provided by combining REL=Alternate with the MEDIA attribute. Some examples follow:

<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">

<LINK REL=Alternate HREF="index.ja.html" HREFLANG=ja CHARSET="SHIFT_JIS" TITLE="Japanese version">

<LINK REL=Alternate HREF="/distribution/html40.pdf" TYPE="application/pdf" MEDIA=print TITLE="PDF version">

Note that the LANG and DIR attributes apply to the text of the TITLE attribute, not to the content of the link.

The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

• _blank renders the link in a new, unnamed window
• _self renders the link in the current frame (useful for overriding a BASE TARGET)
• _parent renders the link in the immediate FRAMESET parent
• _top renders the link in the full, unframed window

In HTML 4.0, the TARGET attribute value is case-insensitive, so that _top and _TOP both have the same meaning. However, most browsers treat the TARGET attribute value as case-sensitive and do not recognize _TOP as having the special meaning of _top.

---