Skip to main content

XHTML Syntax

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.

Fundamentals points to remember for a 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 can't be shortened.
  • All tags must be properly nested.

DOCTYPE Declaration​

All XHTML documents must contain a DOCTYPE statement at the beginning of the document.

There are three types of DOCTYPE declarations:

  • Strict: it doesn't allow any presentational markup or deprecated elements (such as <font> elements) or framesets to be used. It validates loose HTML style markup.
  • Transitional: it allows some presentational markup and deprecated elements (such as <font> elements) but not framesets. It validates loose HTML style markup.
  • Frameset: it allows the use of frameset.

Example Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

Example Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

Example Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">

Case Sensitivity: tags must be in lower case​

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

<!-- Invalid in XHTML -->  
<A Href="/xhtml/xhtml-tutorial">XHTML Tutorial</A>  
<!-- Valid in XHTML -->  
<a href="/xhtml/xhtml-tutorial">XHTML Tutorial</a>

Closing Tags are mandatory​

An XHTML must have an equivalent closing tag. Even empty elements should also have closing tags.

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

<!-- 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 values of XHTML attributes must be quoted. Otherwise, your XHTML document is assumed as an invalid document.

<!-- 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 doesn't allow you to minimize attributes. You have to explicitly state the attribute and its value.

<!--Invalid in XHTML -->  
<option selected> 
 
<!-- valid in XHTML-->  
<option selected="selected">

A list of minimized attributes in HTML and the way you need to write them in XHTML is showed in the following table:

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 replaces the name attribute. Instead of using name = "name", XHTML prefers to use id = "id"

<!-- 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. You have to use the type attribute.

<!-- Invalid in XHTML -->  
<script language="JavaScript" type="text/JavaScript">  
   document.write("Hello XHTML!");  
</script>  

<!-- Valid in XHTML -->  
<script type="text/JavaScript">  
   document.write("Hello XHTML!");  
</script>

Nested Tags​

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

<!-- Invalid in XHTML -->  
<b><i> This text is bold and italic</b></i>  

<!-- Valid in XHTML -->  
<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.

Example​

<?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>Your Title</title>
    </head>
    <body>
        ... your contents ...
    </body>
</html>

Table of Contents