XHTML 1.0 rules
Procedure
- Apply XML declaration.
According to the XML 1.0 specification, all processors are required to automatically
support (and detect) the UTF-8 and UTF-16 encodings. If you use one of these two
encodings when serializing your documents, you don't need an XML declaration
(unless you need to specify version or standalone information).
Example:
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
- Apply the DOCTYPE declaration.
All XHTML documents must have a DOCTYPE declaration at the FIRST line of the document.
XHTML 1.0 specifies three Document Type Definitions (DTD):
Strict
Use this when you want really clean markup, free of presentational clutter.
Use this together with Cascading Style Sheets.
The Strict DTD includes elements and attributes that have not been deprecated or
do not appear in framesets.
Transitional
Use this when you need to take advantage of HTML's presentational features
and when you want to support browsers that don't understand Cascading
Style Sheets.
The Transitional DTD includes everything in the strict DTD plus
deprecated elements and attributes.
Frameset
Use this when you want to use HTML Frames to partition the browser window into
two or more frames.
The Frameset DTD includes everything in the transitional DTD plus frames as well.
Wrong example:
Correct example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
...
</html>
|
Note: The most commonly used DTD is the XHTML Transitional.
- XHTML documents must be well-formed.
The html, head and body elements must be present, and the title must be present
inside the head element.
The xmlns attribute inside the <html> tag is required in XHTML.
However, the validator on w3.org does not complain when this attribute is missing
in an XHTML document. This is because
"xmlns=http://www.w3.org/1999/xhtml"
is a fixed value and will be added to the <html> tag even if you do not include it.
Wrong example:
<html>
<body> ... </body>
<head> ... </head>
</html>
|
Correct example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> ... </title>
</head>
<body> ... </body>
</html>
|
- All XHTML elements must be properly nested.
Wrong example:
| <b><i>hello world</b></i> |
Correct example:
| <b><i>hello world</i></b> |
- All tag names must be in lowercase.
Wrong example:
| <A NAME="MyDemo">Demo</A> |
Correct example:
| <a name="MyDemo">Demo</a> |
- All XHTML elements must be closed.
Wrong example:
Correct example:
- Attribute minimization is forbidden.
Wrong example:
<input checked>
<input disabled>
<input readonly>
<option selected>
<dl compact>
<frame noresize>
|
Correct example:
<input checked="checked" />
<input disabled="disabled" />
<input readonly="readonly" />
<option selected="selected" />
<dl compact="compact">
<frame noresize="noresize" />
|
- All empty elements must be closed.
- <hr />
- <br />
- <img ... />
- <meta ... />
- <param ... />
Wrong example:
Correct example:
Note 1:
You should add an extra space before the "/" symbol like this: <br />.
This is needed to make XHTML compatible with today's browsers.
Note 2:
For an empty paragraph do not use the minimized form
(e.g. use <p></p> and not <p />).
- All attribute names must be in lower case.
Wrong example:
<table WIDTH="500" BORDER="0">
...
</table>
|
Correct example:
<table width="500" border="0">
...
</table>
|
- All attribute values must be quoted.
Wrong example:
<table width=300 border=0>
...
</table>
|
Correct example:
<table WIDTH="500" border="0">
...
</table>
|
- The id attribute replaces the name attribute.
Wrong example:
|
<img src="demo.gif" name="demo_pic" />
|
Correct example:
|
<img src="demo.gif" id="demo_pic" />
|
Note: The name attribute is used in the following HTML tags:
a, applet, form, frame, iframe, img, and map. To be compatible with older
browsers, you should use the name and id attributes with identical values:
|
<img src="demo.gif" id="demo_pic" name="demo_pic" />
|
- Element Prohibitions.
It is not allowed to nest certain elements (e.g. <a ..>)
within another elements (e.g. <a ..>) to any descendant depth.
These elements are:
|
a
|
must not contain other a elements.
|
|
pre
|
must not contain the img, object, big, small, sub, or sup elements.
|
|
button
|
must not contain the input, select, textarea, label, button, form, fieldset, iframe or
isindex elements.
|
|
label
|
must not contain other label elements.
|
|
form
|
must not contain other form elements.
|
Wrong example:
<a name="demo">
<a href="https://www.mobilefish.com">mobilefish</a>
</a>
|
Correct example:
<a name="demo"></a>
<a href="https://www.mobilefish.com">mobilefish</a>
|
- Apply the language attribute.
If the lang attribute is used in an element, you must add the xml:lang attribute.
Note: The lang attribute specifies the language of the content within an element.
Wrong example:
<div lang="en">Wrong!</div>
<div lang="nl">Fout!</div>
|
Correct example:
<div lang="en" xml:lang="en">Wrong!</div>
<div lang="nl" xml:lang="nl">Fout!</div>
|
- Script and style elements.
In XHTML, the script and style elements are declared as having #PCDATA content.
As a result, < and & will be treated as the start of markup, and entities such
as < and & will be recognized as entity references by the XML processor
to < and & respectively. Wrapping the content of the script or style element
within a CDATA marked section avoids the expansion of these entities.
Wrong example:
<script type="text/javascript">
... unescaped script content ...
</script>
|
Correct example:
<script type="text/javascript">
//<![CDATA[
... unescaped script content ...
//]]>
</script>
|
Note 1: Wrapping your script with CDATA is only needed for embedded scripts, not for
externally referenced instances. Unfortunately, most browsers do not support CDATA
sections (the standard XML method for including text containing special characters)
so the safest option is to move your client-side scripts out to separate files and
include them using the script element's src attribute.
Note 2: Use external style sheets if your style sheet uses < or & or ]]> or --.
Note that XML parsers are permitted to silently remove the contents of comments.
Therefore, the historical practice of "hiding" scripts and style sheets within
"comments" to make the documents backward compatible is likely to not work as
expected in XML-based user agents.
|
