XHTML Tutorials: XHTML Syntax

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 are have to pay a bit extra attention to make your HTML document compliance to XHTML.

Here are the important points to remember while writing a new XHTML document or converting existing HTML document into XHTML document:

XHTML document must have a DOCTYPE declaration at the top of the document.
All XHTML tags and attributes should be written in lower case only.
All the XHTML tags will have their closing tags.
All the attribute values must be quoted.
Attribute minimization is forbidden.
The id attribute replaces the name attribute.
The language attribute of the script tag is deprecated
All the tags should be properly nested
Element Prohibitions

Here's a more detailed explanation of the above XHTML rules:

DOCTYPE Declaration:

All XHTML documents must have a DOCTYPE declaration at the top of document. There are three types of DOCTYPE which are discussed in detail in XHTML Doctypes chapter. Below is one of the examples 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, more strictly all the XHTML tags and attributes should be written in lower case only. Here is the example, this is wrong because Href and anchor A are having characters which are not in lower case.

<!-- 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>

Closing Tags:

Each and every XHTML tag should have an equivalent closing tags, even empty elements should also have closing tags. Here is the example showing the difference:

<!-- 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">

Below is 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 XHTML attribute values must be quoted otherwise your XHTML document will be assumed as an invalid document. Here is the example showing the difference.

<!-- 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 have you should explicitly state the attribute and the value. Following is the example showing 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 how they should be written 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 prefer to use id="id". Following is the example to show this difference:

<!-- 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. Following is the example showing 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:

All the XHTML tags must be nested properly otherwise your document will be assumed as a wrong XHTML document. Following is the example showing this difference:

<!-- 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 have prohibitions on which elements they can contain. This prohibition applies to all depths of nesting, i.e. it contains all the descendant 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:

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>

XHTML Tutorials

Home Page

XHTML Syntax