XHTML syntax is very similar to HTML syntax and almost all the valid
HTML elements are valid in XHTML as well. But when you write an XHTML
document, you need to pay a bit extra attention to make your HTML
document compliant to XHTML.
Here are the important points to remember while writing a new XHTML
document or converting existing HTML document into XHTML document −
- Write a DOCTYPE declaration at the start of the XHTML document.
- Write all XHTML tags and attributes in lower case only.
- Close all XHTML tags properly.
- Nest all the tags properly.
- Quote all the attribute values.
- Forbid Attribute minimization.
- Replace the name attribute with the id attribute.
- Deprecate the language attribute of the script tag.
Here is the detail explanation of the above XHTML rules −
DOCTYPE Declaration
All XHTML documents must have a DOCTYPE declaration at the start.
There are three types of DOCTYPE declarations, which are discussed in
detail in XHTML Doctypes chapter. Here is an example of using DOCTYPE −
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Case Sensitivity
XHTML is case sensitive markup language. All the XHTML tags and attributes need to be written in lower case only.
<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>
In the example,
Href and anchor tag
A are not in lower case, so it is incorrect.
Closing the Tags
Each and every XHTML tag should have an equivalent closing tag, even
empty elements should also have closing tags. Here is an example showing
valid and invalid ways of using tags −
<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.
<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >
The following syntax shows the correct way of writing above tags in
XHTML. Difference is that, here we have closed both the tags properly.
<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>
<!-- This is also valid now -->
<img src="/images/xhtml.gif" />
Attribute Quotes
All the values of XHTML attributes must be quoted. Otherwise, your
XHTML document is assumed as an invalid document. Here is the example
showing syntax −
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />
Attribute Minimization
XHTML does not allow attribute minimization. It means you need to
explicitly state the attribute and its value. The following example
shows the difference −
<!-- This is invalid in XHTML -->
<option selected>
<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">
Here is a list of the minimized attributes in HTML and the way you need to write them in XHTML −
| HTML Style |
XHTML Style |
| 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" |
The id Attribute
The id attribute replaces the name attribute. Instead of using name =
"name", XHTML prefers to use id = "id". The following example shows how
−
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo" />
The language Attribute
The language attribute of the script tag is deprecated. The following example shows this difference −
<!-- This is invalid in XHTML -->
<script language="JavaScript" type="text/JavaScript">
document.write("Hello XHTML!");
</script>
<!-- Correct XHTML way of writing this is as follows -->
<script type="text/JavaScript">
document.write("Hello XHTML!");
</script>
Nested Tags
You must nest all the XHTML tags properly. Otherwise your document is
assumed as an incorrect XHTML document. The following example shows the
syntax −
<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>
<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>
Element Prohibitions
The following elements are not allowed to have any other element
inside them. This prohibition applies to all depths of nesting. Means,
it includes all the descending elements.
| Element |
Prohibition |
| <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. |
A Minimal XHTML Document
The following example shows you a minimum content of an XHTML 1.0 document −
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
<head>
<title>Every document must have a title</title>
</head>
<body>
...your content goes here...
</body>
</html>
No comments:
Post a Comment