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.



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.

    <b><i>This text is bold and italic</b></i>  This is incorrect
    <b><i>This text is bold and italic</i></b>  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<br>
    Correct break<br/>
    Correct break<br />

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

    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

    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.

      ... your script code ...

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

    Here's a sample XHTML template:

    <!DOCTYPE html>

    <title>Some Title</title>

    body of page



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"

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

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


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


About TheScarms
About TheScarms

Sample code
version info

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

Email this page

© Copyright 2024 TheScarms
Goto top of page