The Web Design Group

Common Problems

Other languages: français

If you think that another common problem deserves discussion here, please let me know.

Writing HTML in a SCRIPT Element

A common error (and the most common source of erroneous bug reports for the WDG HTML Validator) occurs when writing HTML tags within a SCRIPT element:

<script type="text/javascript">
  // This is an error!
// -->

As mentioned in the HTML 4 Recommendation's note about specifying non-HTML data in element content, end tags are recognized within SCRIPT elements, but other kinds of markup--such as start tags and comments--are not. This is an unintuitive quirk of SGML for elements defined to have CDATA content.

Authors should avoid using strings such as "</P>" in their embedded scripts. In JavaScript, authors may use a backslash to prevent the string from being parsed as markup:

<script type="text/javascript">
// -->

Note that in XHTML, authors must also take care when using start tags within a script element. For details, see the Script and Style elements section of the XHTML 1.0 Recommendation as well as the HTML compatibility guideline for embedded scripts.

Ampersands (&'s) in URLs

Another common error occurs when including a URL which contains an ampersand ("&"):

<!-- This is invalid! --> <a href="foo.cgi?chapter=1&section=2&copy=3&lang=en">...</a>

This example generates an error for "unknown entity section" because the "&" is assumed to begin an entity reference. Browsers often recover safely from this kind of error, but real problems do occur in some cases. In this example, many browsers correctly convert &copy=3 to ©=3, which may cause the link to fail. Since &lang; is the HTML entity for the left-pointing angle bracket, some browsers also convert &lang=en to 〈=en. And one old browser even finds the entity &sect;, converting &section=2 to §ion=2.

To avoid problems with both validators and browsers, always use &amp; in place of & when writing URLs in HTML:

<a href="foo.cgi?chapter=1&amp;section=2&amp;copy=3&amp;lang=en">...</a>

Note that replacing & with &amp; is only done when writing the URL in HTML, where "&" is a special character (along with "<" and ">"). When writing the same URL in a plain text email message or in the location bar of your browser, you would use "&" and not "&amp;". With HTML, the browser translates "&amp;" to "&" so the Web server would only see "&" and not "&amp;" in the query string of the request.

Incorrect Nesting of Elements

Elements in HTML cannot overlap each other. The following is invalid:

<B><I>Incorrect nesting</B></I>

In this example, the B element is intended to contain an I element. To be truly contained within the B element, the I element's end tag must occur before the B element's end tag. The following is valid:

<B><I>Correct nesting</I></B>

Using a NAME attribute with IMG or FORM

This problem is discussed in detail at JavaScript and HTML: possibilities and caveats.

Using all lowercase letters in a DOCTYPE

In a DOCTYPE, the formal public identifier--the quoted string that appears after the PUBLIC keyword--is case sensitive. A common error is to use the following:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

Here the formal public identifier (FPI) is all lowercase. The validator does not recognize the document as HTML 4.0 Transitional since the expected FPI for HTML 4.0 Transitional uses different case:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

"Missing a required sub-element of HEAD"

If you receive the error "Missing a required sub-element of HEAD", check that you have included the TITLE element in the HEAD. The TITLE element is required in all HTML documents.

Uppercase letters in XHTML tags

In XHTML, unlike HTML, element and attribute names must be all lowercase. For example, onMouseOver is an invalid attribute in XHTML, which requires use of onmouseover instead. Either is fine in HTML.