How to use JavaScript and CSS correctly in XHTML documents

In more and more websites, the use of XHTML is replacing HTML4 at a fast pace. However, some mainstream browsers do not support XHTML very well. In addition, some web page creators do not understand the differences between XHTML and HTML4 well, which makes the progress of XHTML in the development of the WEB slow.

XHTML is XML not HTML

Currently, one of the main misconceptions about XHTML is that it is just another version of HTML. This misunderstanding is caused by the fact that Microsoft Internet Explorer only supports XHTML in the MIME format text/html and not the recommended application/xhtml+xml format.

When an XHTML page is parsed in the text/html MIME format, it is no different from an HTML page. However, when it is parsed in the text/xml or application/xhtml+xml MIME format, it follows strict XML writing and display rules.

Correctly formatted XHTML is an XML program and must follow strict rules when written:

1. The characters < and & are not allowed to appear in the content of an XHTML document unless they are contained in a CDATA tag (<![CDATA[...]]>)

2. Comment tags () cannot contain two consecutive hyphens (--)

3. Content contained in comment tags () will be ignored

Problems with style and script content

The content within the style and script tags will cause some differences when XHTML is parsed as XML format (rather than HTML format).

JavaScript contains characters that cannot exist in XHTML

Some special characters of JavaScript cannot exist outside of the CDATA tag of XHTML.

<script type="text/javascript">
var i = 0;
while(++i < 10){
//...
}
</script>

Note: The sample code above is not well-formed XHTML because it uses the tag " < " which is not allowed in XHTML or XML.

Using comments in style and script content

Authors familiar with HTML usually understand that putting the content of style and script tags in comment tags will hide these contents in the browser, but some browsers cannot understand them.

<style type="text/css">

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

</script>

The above example shows how to ignore the content within the comment tag in the browser. At the same time, this example also shows the difference between the browser in processing the content of text/xml format and application/xhtml+xml format.

Mozilla 1.1+ / Opera 7
No CSS is applied, no JavaScript is executed

Netscape 7.0x / Mozilla 1.0.x
Do not apply CSS, but execute JavaScript

Internet Explorer 5.5+
The document is not displayed. (See: https://developer.mozilla.org/Ta ... _in_XHTML_Documents )

Style and javascript contain two consecutive dashes (--)

Another problem that arises when using comment tags in JavaScript in XHTML pages is that there will be two consecutive hyphens (--) in the JavaScript:

<script type="text/javascript">

</script>

Use CDATA instead of comments

Putting the contents of the script tag into a CDATA block can handle the problem of two consecutive dashes in the comment, but this will make some lower-version browsers not support it because they cannot understand XML. Fortunately, we can achieve compatibility by using the comment symbol in JavaScript to comment the CDATA block.

<script type="text/javascript">
//<![CDATA[
var i = 0;

while (++i < 10)
{
// ...
}
//]]>
</script>

Recommended xhtml and html compatibility processing methods

Don't write style and script directly in the XHTML page. A good alternative is to use external files to write CSS and JavaScript, and then import them in XHTML.

This recommendation seems to be a good one. In any case, it will ensure that there will be no problems in the process of converting pages from text/html to application/xhtml+xml, at least in the next few years.

<<: How to improve Idea startup speed and solve Tomcat log garbled characters

>>: Detailed explanation of the simple use of MySQL query cache