XHTML Syntax

XHTML syntax is very similar to HTML syntax and all the valid HTML elements are also valid in XHTML. But XHTML is case sensitive so you have to pay a bit extra attention while writing an XHTML document to make your HTML document compliant to XHTML.

You must remember the following important points while writing a new XHTML document or converting existing HTML document into XHTML document:

  • All documents must have a DOCTYPE.
  • All tags must be in lower case.
  • All documents must be properly formed.
  • All tags must be closed.
  • All attributes must be added properly.
  • The name attribute has changed.
  • Attributes cannot be shortened.
  • All tags must be properly nested.

DOCTYPE Declaration

All XHTML documents must contain a DOCTYPE declaration at the start. There are three types of DOCTYPE declarations:

  • Strict
  • Transitional
  • Frameset

Here is an example of using DOCTYPE.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  

Tags must be in lower case

XHTML is case-sensitive markup language. So, all the XHTML tags and attributes must be written in lower case.

  1. <!-- Invalid in XHTML -->  
  2. <A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>  
  3. <!-- Valid in XHTML -->  
  4. <a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>   

Closing Tags are mandatory

An XHTML must have an equivalent closing tag. Even empty elements should also have closing tags. Let's see an example:

  1. <!-- Invalid in XHTML -->  
  2. <p>This paragraph is not written according to XHTML syntax.  
  3. <!-- Invalid in XHTML -->  
  4. <img src="/images/xhtml.gif" >  
  5. <!-- Valid in XHTML -->  
  6. <p>This paragraph is not written according to XHTML syntax.</p>  
  7. <!-- Valid in XHTML-->  
  8. <img src="/images/xhtml.gif" />  

Attribute Quotes

All the XHTML attribute's values must be quoted. Otherwise, your XHTML document is assumed as an invalid document.

See this example:

  1. <!-- Invalid in XHTML -->  
  2. <img src="/images/xhtml.gif" width=250 height=50 />  
  3. <!-- Valid in XHTML -->  
  4. <img src="/images/xhtml.gif" width="250" height="50" />   

Attribute Minimization

XHTML doesn't allow you to minimize attributes. You have to explicitly state the attribute and its value.

See this example:

  1. <!--Invalid in XHTML -->  
  2. <option selected>  
  3. <!-- valid in XHTML-->  
  4. <option selected="selected">   

A list of minimized attributes in HTML and the way you need to write them in XHTML.

HTML StyleXHTML Style
compactcompact="compact"
checkedchecked="checked"
declaredeclare="declare"
readonlyreadonly="readonly"
disableddisabled="disabled"
selectedselected="selected"
deferdefer="defer"
ismapismap="ismap"
nohrefnohref="nohref"
noshadenoshade="noshade"
nowrapnowrap="nowrap"
multiplemultiple="multiple"
noresizenoresize="noresize"

The id Attribute

The id attribute is used to replace the name attribute. Instead of using name = "name", XHTML prefers to use id = "id".

See this example:

  1. <!-- Invalid in XHTML -->  
  2. <img src="/images/xhtml.gif" name="xhtml_logo" />  
  3. <!-- Valid in XHTML -->  
  4. <img src="/images/xhtml.gif" id="xhtml_logo" />  

The language attribute

In XHTML, the language attribute of script tag is deprecated so you have to use type attribute instead of this.

See this example:

  1. <!-- Invalid in XHTML -->  
  2. <script language="JavaScript" type="text/JavaScript">  
  3.    document.write("Hello XHTML!");  
  4. </script>  
  5. <!-- Valid in XHTML -->  
  6. <script type="text/JavaScript">  
  7.    document.write("Hello XHTML!");  
  8. </script>       

Nested Tags

XHTML tags must be nested properly. Otherwise your document is assumed as an incorrect XHTML document.

See this example:

  1. <!-- Invalid in XHTML -->  
  2. <b><i> This text is bold and italic</b></i>  
  3. <!-- Valid in XHTML -->  
  4. <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 is applicable for all the descending elements.

ElementProhibition
<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.