facebook google plus twitter
Webucator's Free XML Tutorial

Lesson: Quick Introduction to XHTML

Welcome to our free XML tutorial. This tutorial is based on Webucator's Introduction to XML Training course.

This lesson covers the basics of XHTML and the difference between HTML and XHTML. You will also create your first XHTML document.

Lesson Goals

  • Learn what XHTML is.
  • Learn the difference between XHTML and HTML.
  • Learn the different XHTML specifications.
  • Create an XHTML document.

What is XHTML

XHTML is the XML version of HTML. The major benefits of XHTML over HTML are:

  • Non-HTML aware user agents can read XHTML documents.
  • XHTML documents can easily be transformed into other document types with XSLT or other languages.

What is XHTML

XHTML is the XML version of HTML. The major benefits of XHTML over HTML are:

  • Non-HTML aware user agents can read XHTML documents.
  • XHTML documents can easily be transformed into other document types with XSLT or other languages.

XHTML vs. HTML

XHTML documents differ from HTML documents in the following ways.

  • Documents must be well-formed according to XML syntax rules.
  • Element and attribute names must be in lowercase letters.
  • Container elements must have end tags. For example, list items must be closed with a </li> tag.
  • Attribute values must be in single or double quotes.
  • Attributes may not be minimized. Attributes that have no defined value should use the attribute name for their value.
    <!--Invalid-->
    <select name='flavor' multiple>
    
    <!--Valid-->
    <select name='flavor' multiple='multiple'>
  • Empty elements must be closed, either with a standard end tag or a shortcut close.
    <!--Invalid-->
    <hr>
    
    <!--Valid-->
    <hr></hr>
    
    <!--Also Valid-->
    <hr/>
  • Script and Style elements contain PCDATA, meaning that they will be parsed as XML. Because these elements often contain special XML characters such as < and &, this can cause problems. To be safe, the content of script and style elements should be wrapped in CDATA sections as shown below.
    <script type="text/javascript">
    	<![CDATA[
    		//script content
    	]]>
    </script>

For additional information on the differences between XHTML and HTML, see http://www.w3.org/TR/xhtml1/#diffs.

The DOCTYPE Declaration

There are three DTDs for XHTML: Strict, Transitional, and Frameset. All XHTML documents must conform to the XML syntax rules.

XHTML Strict

XHTML Documents that conform to the Strict DTD may not use any deprecated HTML tags. The DOCTYPE declaration looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional

XHTML Documents that conform to the Transitional DTD may use deprecated HTML tags, but may not use the <frameset> and <frame> tags. The DOCTYPE declaration looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
	Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.dtd">

XHTML Frameset

XHTML Documents that conform to the Frameset DTD may use deprecated HTML tags including the <frameset> and <frame> tags. The DOCTYPE declaration looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

The Document Element

In XHTML, the document element (<html>) must contain a namespace declaration as shown below.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

A Sample XHTML Document

Below is an example XHTML document.

Code Sample:

XHTML/Demos/Xml101.html
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Introduction to XML</title>
</head>
<body>
<h1>Introduction to XML</h1>
<div id="courseNum">XML101</div>
<div id="courseLength">3 days</div>
<h2>Prerequisites</h2>
<ul>
	<li>Experience with Word Processing</li>
	<li>Experience with HTML (optional, but recommended)</li>
</ul>
<h2>Course Outline</h2>
<div id="outline">
<ul>
	<li>
		XML Basics
		<ul>
			<li>What is XML?</li>
			<li>
				XML Benefits
				<ul>
					<li>XML Holds Data, Nothing More</li>
					<li>XML Separates Structure from Formatting</li>
					<li>XML Promotes Data Sharing</li>
					<li>XML is Human-Readable</li>
					<li>XML is Free</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>
				XML Documents
				<ul>
					<li>The Prolog</li>
					<li>Elements</li>
					<li>Attributes</li>
					<li>CDATA</li>
					<li>XML Syntax Rules</li>
					<li>Special Characters</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>Creating a Simple XML File</li>
		</ul>
	</li>
</ul>
</div>
</body>
</html>

The Document Element

In XHTML, the document element (<html>) must contain a namespace declaration as shown below.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">