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