Home >>XHTML Tutorial >XHTML Syntax
XHTML Syntax
XHTML Syntax
XHTML syntax is somewhat close to HTML syntax and is therefore applicable for all existing HTML components in XHTML. Yet XHTML is case sensitive and when composing an XHTML document, you need to pay a little more care to making the HTML document compatible with XHTML.
When composing a new XHTML document, or transforming current HTML document to XHTML document, you will note the following critical points:
Write a DOCTYPE declaration at XHTML document initialization.
- In the lower case, compose just the XHTML tags and attributes.
- Open all tags in XHTML correctly.
- Nest well all the tags.
- Quote the values of all attributes.
- Forbid minimization of the Attribute.
- Replace the attribute name with the id attribute.
- Deprime the script tag's language attribute
DOCTYPE Declaration
Originally all XHTML documents must have a DOCTYPE declaration. There are three types of DOCTYPE declaration, covered in detail in the chapter on XHTML doctypes. Here's an illustration of DOCTYPE –
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
There are three types of DOCTYPE declarations:
- Strict
- Transitional
- Frameset
Tags must be in lower case
XHTML is the language of case-sensitive markup. Therefore all descriptions and properties in XHTML must be written in the lower case.
<!-- Invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Valid in XHTML -->
<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 the same closing tag, and even empty elements should have closing tags as well. Below is an overview of legitimate and incorrect forms to use tags –
<!-- Invalid in XHTML -->
This paragraph is not written according to XHTML syntax.
<!-- Invalid in XHTML -->
<!-- Valid in XHTML -->
This paragraph is not written according to XHTML syntax.
<!-- Valid in XHTML-->
Attribute Quotes
All values will be quoted for the XHTML attributes. Otherwise the XHTML document will be considered to be invalid. Here is an example of a syntax −
See this example:
<!-- Invalid in XHTML -->
<!-- Valid in XHTML -->
Attribute Minimization
XHTML does not require minimisation of the attributes. Which implies you will mention the attribute and its value directly. The following definition shows the difference between –
See this example:
<!--Invalid in XHTML -->
<option selected>
<!-- valid in XHTML-->
<option selected="selected">
Here is a collection 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 must override the attribute to name. XHTML prefers to use id = "id", instead of using the name = "name" Example below reveals how –
See this example:
<!-- Invalid in XHTML -->
<!-- Valid in XHTML -->
The language attribute
The script tag language feature is deprecated. The definition below indicates the difference –
See this example:
<!-- Invalid in XHTML -->
<script language="JavaScript" type="text/JavaScript">
document.write("Hello phptpoint!");
</script>
<!-- Valid in XHTML -->
<script type="text/JavaScript">
document.write("Hello Phptpoint!");
</script>
Nested Tags
All the XHTML tags must be nestled correctly. Then it is believed that the document is an incorrect XHTML document. The definition below shows a syntax –
See this example:
<!-- Invalid in XHTML -->
<b><i> This is first paragraph</b></i>
<!-- Valid in XHTML -->
<b><i> This text is bold and italic</i></b>
Element Prohibitions
| 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. |