XHTML Syntax is similar to the HTML and all the elements that are valid in HTML also valid in XHTML. XHTML is stricter than HTML in syntax and case sensitivity.
Following are the important points that we need to remember when we are writing a new XHTML document:
- XHTML documents must have a DOCTYPE
- XHTML tags must be in lower case
- XHTML tags must be closed
- XHTML attributes must be added properly
- XHTML documents must be properly formed
- Attributes cannot be shortened
- Tags must be properly nested
DOCTYPE Declaration
XHTML documents must have a DOCTYPE declaration and should be first statement of the XHTML document.
There are three types of DOCTYPE declaration in XHTML:
- Strict
- Transitional
- Frameset
DOCTYPE declaration
<!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, so we need to write all the XHTML tags and attributes in lower case only.
Example
<!--Invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<--Valid in XHTML-->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>
Tags must be closed
In XHTML, each and every tag should have an equivalent closing tag even empty elements should also have closing tags.
Example 1
<!-- Invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax
<!-- Valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>
Example 2
<!-- Invalid in XHTML -->
<img src="/images/xhtml.gif" >
<!-- Valid in XHTML-->
<img src="/images/xhtml.gif" />
Attribute Quotes
In XHTML, attributes values must be quoted ("or"). Otherwise, your XHTML document is assumed as an invalid document.
Example
<!-- Invalid in XHTML -->
<img src="/images/xhtml.gif" width=200 height=100 />
<!-- Valid in XHTML -->
<img src="/images/xhtml.gif" width="200" height="100" />
Attribute Minimization
In XHTML, attribute minimization is invalid. It means you need to explicitly state the attribute and its value.
Example
<!-- Invalid in XHTML -->
<option selected>
<!--Valid in XHTML -->
<option selected="selected">
HTML vs XHTML Attributes
XHTML uses its own way to write attributes, the following table contains the uses of attributes in two different documents.
| 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" |
XHTML id start
In XHTML, id attribute is used to replace the name attribute. Instead of using name = "name", XHTML prefers to use id = "id".
Example
<!-- Invalid in XHTML -->
<img src="XHTML.jpg " name="xhtml_logo" />
<!-- Valid in XHTML -->
<img src="XHTML.jpg" id="xhtml Image" />
XHTML language Attribute
The language attribute of the script tag is deprecated but can be used.
Example
<!-- Invalid in XHTML -->
<script language="JavaScript" type="text/JavaScript">
document.write("Language attribute of XHTML!");
</script>
<!-- Valid in XHTML -->
<script type="text/JavaScript">
document.write("Language attribute of XHTML!");
</script>
XHTML Nested Tags
In XHTML, tags must be nested properly. Otherwise our document is assumed as an incorrect XHTML document.
Example
<!-- Invalid in XHTML -->
<b><i> Bold and Italic text</b></i>
<!-- Valid in XHTML -->
<b><i> Bold and Italic text</i></b>
XHTML Element Prohibitions
In XHTML Element Prohibition, we cannot allow other elements inside these elements.
| Element |
Prohibition |
| <a> |
It must not contain other <a> elements. |
| <pre> |
It must not contain the <img>, <object>, <big>, <small>, <sub>, or <sup> elements. |
| <button> |
It must not contain the <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> or <isindex> elements. |
| <label> |
It must not contain other <label> elements. |
| <form> |
It must not contain other <form> elements. |