script Element

Module

The script element is declared by the XHTML 1.1 Scripting Module

Elements in the Scripting Module are:
script | noscript

Description

The script element allows scripting content to be added to a document, with the MIME type of the script being specified using the mandatory type attribute. (See also the noscript element.) The scripting content itself may be specified in one of two ways:

1. An external script may be referenced using the src attribute. This is an elegant way to include scripting content and should be the method of choice.

   For example, an external JavaScript file may be loaded as follows:

   <script type="text/javascript" src="script.js"></script>
   If the src attribute is specified, any content within the script element should be ignored by the user agent.
2. The scripting code may be enclosed as content of the script element itself.

   For example (again using JavaScript):

   <script type="text/javascript">
     window.onload = myobj.setup;
   </script>

   This second method may require the author to consider XHTML/HTML compatibility issues as well as user agent support of the element. This is discussed below.

If a script element's code uses JavaScript's document.write to insert markup directly into the page then that markup should always respect the Content Model of that element's parent. In almost all cases, however, it is better to use the document object model (DOM) instead of document.write - in which case any modifications to the DOM should be made such that the relevant Content Models are respected. In fact, the W3C advise against using document.write or document.writeln at all since this technique may not be supported by native XML user agents - see the W3C Note (work in progress) *XHTML Media Types - Compatibility Guidelines - Item A.21. On the same page, they also recommend against using the innerHTML JavaScript method.

If the JavaScript DOM is used to add elements to the document, the document.createElementNS method should be used as a first preference with a fallback to document.createElement if the former is not supported. A function resembling the following should suffice:

function cElt ( ns, elt ) {
  if ( document.createElementNS ) {
    return document.createElementNS( ns, elt );
  }
  return document.createElement( elt );
}

This function should then be called each time a new element is required. For XHTML elements, the namespace ns should be set to "http://www.w3.org/1999/xhtml".

Alternatively, a fallback document.createElementNS method can be created prior to DOM manipulation:

if ( !document.createElementNS ) {
    document.createElementNS = function ( ns, elt ) { return document.createElement( elt ) };
}

In this case, all new elements should then be created using document.createElementNS.

It should also be borne in mind that element tag names are always returned in uppercase when a document is served as "text/html" but in lowercase when served as "application/xhtml+xml". This is because tag names are case sensitive in XHTML but case insensitive in HTML 4. You can cater for this inconsistency by retrieving all tag names using, for example, elt.tagName.toLowerCase(). The same situation may also arise with attribute names - you can use attnode.name.toLowerCase() to be sure of the case you are getting.

Issues arising when including code as script element content

In XHTML, the content of the script element is of type #PCDATA which means that the content of the element is parsed. This has the upshot that any ampersand or less-than characters within the script must be escaped if the document is to pass W3C Validation. This may be done on a character-by-character basis or by enclosing the content in a CDATA Section (unless that content contains the string ]]>). Escaping of such characters is not a problem unless the document is to be served as "text/html" - in which case you should use external scripts if your script contains any of the following:
< or & or ]]> or --
Ref: W3C Note (work in progress) *XHTML Media Types - Compatibility Guidelines - Item A.4. This is the same issue as arises with the style element.

Note: CDATA Sections are not supported by most HTML user agents (with Opera being a notable exception) when serving a document as "text/html". They should be supported, however, in compliant XHTML user agents where the XHTML has been served as "application/xhtml+xml" (see Serving XHTML 1.1).
Also: Similarly, the alternative method of individually escaping the problem characters in a script is not compatible with HTML since the content of script elements in a "text/html" document is not parsed and such escaped entities will not be expanded as desired.

Another consequence of the #PCDATA status of the script element's content is that any comments (opened by <!-- and closed by -->) within it should be discarded by the user agent's parser. This means that the common HTML practice of enclosing the entire script content within a comment (to prevent those legacy user agents which do not recognise the script element from rendering the scripting code as document content) should not be followed in XHTML. However, such legacy user agents are so few and far between nowadays that I feel that the comment approach is not really necessary any more.

Notwithstanding the Compatibility Guidelines referred to above, some authors have gone to great lengths to create complex commenting code with the aim of making most script content compatible with a wide range of "text/html" and "application/xhtml+xml" user agents whilst also hiding the script from those legacy browsers that do not recognise the script element. This is described well in the 2005 *sitepoint Forum: CDATA Comment - the full hack discussed there is illustrated in the following example. (I am, however, a firm believer in using external scripts - referenced using the src attribute - since this avoids the above issues entirely.)

<script type="text/javascript">
<!--//--><![CDATA[//><!--
  if ( myobj && myobj.setup ) window.onload = myobj.setup;
//--><!]]>
</script>

<script type="text/javascript">//<![CDATA[
  if ( myobj && myobj.setup ) window.onload = myobj.setup;
//]]></script>

Whitespace within a script element should be preserved by the parser and passed to the JavaScript engine.

JavaScript MIME Type

The IANA registered MIME type for JavaScript is "application/javascript" however several browsers (including versions of Internet Explorer and Netscape) do not recognise this type and will not process any scripts so tagged. The nominally obsolete "text/javascript" MIME type should be used if maximum cross-browser support is desired. See *RFC4329 (Section 3) for details about the official line. Also, a *list of Registered MIME Media Types is available on the IANA website.

#REQUIRED Attributes

The type attribute is #REQUIRED on the script element.

Specific Attributes

From the Scripting Module - the Element's own Module

charset [ type Charset ]

The character encoding (e.g. "utf-8") of the script specified in the src attribute

defer [ type Boolean ]

If this attribute is present, this is an indication to the browser that the script will produce no document content and that the page may finish loading before the script is executed

src [ type URI ]

The URI of the external script - if this attribute is specified, the contents of the script element are ignored

type [ type ContentType - #REQUIRED ]

The content type of the script, specifying the scripting language used, e.g. "text/javascript"

Common Attributes

From the Core Attribute Collection

id [ type ID ]

A unique identifier for the element

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

Content Model

#PCDATA

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of script

• #PCDATA

Valid parents of script

• From the Structure Module: body, head
• From the Text Module: abbr, acronym, address, blockquote, cite, code, dfn, div, em, h1 - h6, kbd, p, pre, q, samp, span, strong, var
• From the Hypertext Module: a
• From the List Module: dd, dt, li
• From the Tables Module: caption, td, th
• From the Forms Module: button, fieldset, form, label, legend
• From the Presentation Module: b, big, i, small, sub, sup, tt
• From the Client-side Image Map Module: map
• From the Scripting Module: noscript
• From the Edit Module: del, ins
• From the Bi-directional Text Module: bdo
• From the Object Module: object
• From the Ruby Annotation Module: rb, rt