Extensible HyperText Markup Language (XHTML) Tutorial

This tutorial covers the basics of XHTML. Before reading this tutorial you should already be familiar with HTML and XML. Since there are many great HTML sites available I do not discuss HTML here. However, you may want to read my XML tutorial.

What is XHTML

XHTML stands for Extensible HyperText Markup Language.

XHTML's goal is to replace HyperText Markup Language (HTML). It is very similar to HTML 4.0, but XHTML's syntax is stricter than HTML. This is because XHTML is an XML application.

XHTML standards are defined by the World Wide Web Consortium (W3C), which ensures that structured data will be uniform and independent of applications or vendors. The W3C site is the most complete reference of XHTML available.

XHTML Versus HTML

Here are the main differences between XHTML and HTML:

Tags must be properly nested
Since XHTML documents are XML applications, overlapping elements are not allowed. An element must have a closing tag before the next element's starting tag.

This text is bold and italic This is incorrect
This text is bold and italic This is correct

Tags and attributes must be in lower case
This is because XML is case sensitive. The following specify different elements:

<City> <CITY> <city>

<City Zip="06706">This is incorrect</city>
<city zip="06706">This is correct</city>

All elements must be closed
All empty elements must have an end tag or their start tag must end with />. All non-empty elements must have an end tag.

Incorrect break 
Correct break 
Correct break 

Incorrect horizontal rule<hr>
Correct horizontal rule<hr></hr>

NOTE:
To be compatible with current browsers, empty elements should have an extra space like this: <hr>< /hr>

Attribute values must always be quoted
An element can optionally contain one or more attributes in its start tag. An attribute is a name-value pair separated by an equal sign (=). Attribute values must always be quoted.

<city zip="01085">Westfield</city>

zip="01085" is an attribute of the <city> element.

<message date="08/25/2000"> This is correct
<message date=08/25/2000> This is incorrect

Attributes cannot be minimized

<option selected> This is incorrect
<option selected="true">This is correct

ID attribute replaces the Name attribute

<img src="mypicture.jpg" name="mypicture" /> This is incorrect
<img src="mypicture.jpg" id="mypicture" /> This is correct

NOTE:
To be compatible with current browsers, try this:

<img src="mypicture.jpg" id="mypicture" name="mypicture" />

Special characters
In XHTML script and style characters such as "<" and "&" are treated as markup characters. You must use a CDATA definition.

Mandatory elements
XHTML documents require certain mandatory elements. The html, head, body and title elements must exist.

Additionally there must be a DOCTYPE declaration. The DOCTYPE definition specifies the document type.

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

Here's a sample XHTML template:

<!DOCTYPE html>
<html>

<head>
<title>Some Title</title>
</head>

<body>
.
.
body of page
.
.
</body>

</html>

Document Type Definitions

A The DOCTYPE definition line in an XHTML document specifies the document type by referencing a Document Type Definition (DTD). The DTD specifies the syntax and legal elements of an XHTML document. Three types of documents are defined:

Strict
Used when you want to apply the strictest rules. XHTML should not contain any presentational tags. Use Cascading Style Sheets for the display of data. The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets.

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

Transitional
Used when your document contains presentational tags. This is useful for browsers that do not support Cascading Style Sheets. The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes.

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

Frameset
This is used when the page contains frames to split the browser window into two or more panes. The Frameset DTD includes everything in the transitional DTD plus frames as well.

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

XHTML Validation

A Valid XHTML document one that adheres to the rules of a Document Type Definition. A DTD defines the legal elements of an XHTML document.

You can use the W3C XHTML Validator to validate your XHTML document. Enter the url of your XHTML page. Ex: http://www.w3schools.com/xhtml/default.asp

Index of XHTML Terms
Attributes Case Sensitivity CDATA Definition Closed Elements DOCTYPE Document Type Definition Empty Elements Extensible Hypertext Markup Language HTML	Hypertext Markup Language ID Tag Name Tag Nesting Required Elements Special Characters World Wide Web Consortium - W3C Validation XHTML

About TheScarms

Sample code
version info

If you use this code, please mention "www.TheScarms.com"

Email this page