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.