XHTML pages can be read by all XML enabled devices and while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives the opportunity to write "well-formed" documents which work in all browsers and are backward browser compatible.
Follow the rules below to write XHTML 1.0 Transitional compatible code. All pages can be validated against the official W3C DTD with this link: http://validator.w3.org/check/referer.
Go http://www.w3schools.com/xhtml/ for complete XHTML reference.
Open with the Proper DOCTYPE & Namespace
XHTML documents must begin with tags that tell the browser how to interpret them. All library web pages must begin with the following DOCTYPE declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The declaration above should be typed (or cut and pasted) into the very top of every XHTML document, before any other code or markup.
The XHTML 1.0 Transitional DOCTYPE must be followed by this XHTML namespace declaration:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
If you’re working on an international site and your page will include non–ASCII characters, you can get by with a simple meta tag such as:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Note: Many XHTML pages begin with an optional XML prologue (<?xml>) that precedes the DOCTYPE and namespace declarations. Unfortunately, this XML prologue causes problems in many browsers and must be omitted from XHTML web pages.
Write all Tags in Lowercase
Unlike HTML, XML is case–sensitive. All XHTML tags and attributes must be typed in lowercase, e.g. <title>…</title>, <body>
Quote all Attribute Values
In HTML, you needn’t put quotation marks around attribute values. In XHTML, they must be quoted, e.g. height="55".
Close and Nest all XHTML elements Properly
In XHTML, every tag that opens must close, for example:
<p>This is valid XHTML.</p>
In XHTML, even “empty” tags such as <br> and <img> must close themselves by including a forward slash /> at the very end of the tag:
<br />
<img src="library.gif" />
In XHTML all elements must be properly nested within each other like this:
<b><i>This text is bold and italic</i></b>
Avoid Minimizing Attributes
Minimized attributes is valid in HTML, e.g. <input checked>.
Minimized attributes is invalid in XHTML, following is correct:
<input checked=”checked” />
Following is a list of the minimized attributes in HTML and how they should be written in XHTML:
Use id Attribute to replace the name Attribute
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.
This is wrong:
<img src="picture.gif" name="picture1" />
This is correct:
<img src="picture.gif" id="picture1" />
To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:
<img src="picture.gif" id="picture1" name="picture1" />
Make JavaScript Compatible with XHTML
XHTML is subject to the same syntactical rules as XML. Because of this, an XHTML processor treats the characters < and & as markup, even if they reside inside a <script> block. When an XHTML processor sees these characters within the JavaScript code of a <script> block, it attempts to parse the JavaScript code as if it were markup, which causes the XHTML parser to fail.
To make all JavaScript code compatible with XHTML, if JavaScript code is written within XHTML page, you must place the JavaScript code within a CDATA section. A CDATA section in XML/XHTML starts with the characters <![CDATA[ and ends with the characters ]]>. Any characters within the starting and ending element of a CDATA section are not treated by the XML/XHTML processor as markup, thus preventing a conflict.
Here is an example of how to declare JavaScript code within a CDATA section:
Example:
<script type="text/javascript">
//<![CDATA[
alert("<This is compatible with XHTML>");
//]]>
</script>>
Note that JavaScript source code must be placed within the opening and closing elements of the CDATA section. The CDATA section itself should be commented out with a JavaScript single-line comment // as in the example above. This is so that the JavaScript interrupter does not interpret the CDATA markup as JavaScript, which would cause a JavaScript error.
Note: JavaScript code that is imported into an XHTML document from an external source file is always compatible with XHTML. Thus, any JavaScript code that place into an external JavaScript file and import into an XHTML file via the src attribute of the <script> tag will be valid. Here is an example:
<script type="text/javascript" src="external.js"></script>
Follow the rules below to write XHTML 1.0 Transitional compatible code. All pages can be validated against the official W3C DTD with this link: http://validator.w3.org/check/referer.
Go http://www.w3schools.com/xhtml/ for complete XHTML reference.
Open with the Proper DOCTYPE & Namespace
XHTML documents must begin with tags that tell the browser how to interpret them. All library web pages must begin with the following DOCTYPE declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The declaration above should be typed (or cut and pasted) into the very top of every XHTML document, before any other code or markup.
The XHTML 1.0 Transitional DOCTYPE must be followed by this XHTML namespace declaration:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
If you’re working on an international site and your page will include non–ASCII characters, you can get by with a simple meta tag such as:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Note: Many XHTML pages begin with an optional XML prologue (<?xml>) that precedes the DOCTYPE and namespace declarations. Unfortunately, this XML prologue causes problems in many browsers and must be omitted from XHTML web pages.
Write all Tags in Lowercase
Unlike HTML, XML is case–sensitive. All XHTML tags and attributes must be typed in lowercase, e.g. <title>…</title>, <body>
Quote all Attribute Values
In HTML, you needn’t put quotation marks around attribute values. In XHTML, they must be quoted, e.g. height="55".
Close and Nest all XHTML elements Properly
In XHTML, every tag that opens must close, for example:
<p>This is valid XHTML.</p>
In XHTML, even “empty” tags such as <br> and <img> must close themselves by including a forward slash /> at the very end of the tag:
<br />
<img src="library.gif" />
In XHTML all elements must be properly nested within each other like this:
<b><i>This text is bold and italic</i></b>
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Keywords" content="…" />
<meta name="Description" content="..." />
<link rel="stylesheet" type="text/css" href="….css" />
</head>
<body>
<p>…</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Keywords" content="…" />
<meta name="Description" content="..." />
<link rel="stylesheet" type="text/css" href="….css" />
</head>
<body>
<p>…</p>
</body>
</html>
Avoid Minimizing Attributes
Minimized attributes is valid in HTML, e.g. <input checked>.
Minimized attributes is invalid in XHTML, following is correct:
<input checked=”checked” />
Following is a list of the minimized attributes in HTML and how they should be written in XHTML:
| HTML | XHTML |
| compact | compact="compact" |
| checked | checked="checked" |
| declare | declare="declare" |
| readonly | readonly="readonly" |
| disabled | disabled="disabled" |
| selected | selected="selected" |
| defer | defer="defer" |
| ismap | ismap="ismap" |
| nohref | nohref="nohref" |
| noshade | noshade="noshade" |
| nowrap | nowrap="nowrap" |
| multiple | multiple="multiple" |
| noresize | noresize="noresize" |
Use id Attribute to replace the name Attribute
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.
This is wrong:
<img src="picture.gif" name="picture1" />
This is correct:
<img src="picture.gif" id="picture1" />
To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:
<img src="picture.gif" id="picture1" name="picture1" />
Make JavaScript Compatible with XHTML
XHTML is subject to the same syntactical rules as XML. Because of this, an XHTML processor treats the characters < and & as markup, even if they reside inside a <script> block. When an XHTML processor sees these characters within the JavaScript code of a <script> block, it attempts to parse the JavaScript code as if it were markup, which causes the XHTML parser to fail.
To make all JavaScript code compatible with XHTML, if JavaScript code is written within XHTML page, you must place the JavaScript code within a CDATA section. A CDATA section in XML/XHTML starts with the characters <![CDATA[ and ends with the characters ]]>. Any characters within the starting and ending element of a CDATA section are not treated by the XML/XHTML processor as markup, thus preventing a conflict.
Here is an example of how to declare JavaScript code within a CDATA section:
Example:
<script type="text/javascript">
//<![CDATA[
alert("<This is compatible with XHTML>");
//]]>
</script>>
Note that JavaScript source code must be placed within the opening and closing elements of the CDATA section. The CDATA section itself should be commented out with a JavaScript single-line comment // as in the example above. This is so that the JavaScript interrupter does not interpret the CDATA markup as JavaScript, which would cause a JavaScript error.
Note: JavaScript code that is imported into an XHTML document from an external source file is always compatible with XHTML. Thus, any JavaScript code that place into an external JavaScript file and import into an XHTML file via the src attribute of the <script> tag will be valid. Here is an example:
<script type="text/javascript" src="external.js"></script>
No comments:
Post a Comment