News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

HTML Tutorial – 17 – XHTML

XHTML or Extensible HyperText Markup Language is the successor to HTML. It is a reformulation of HTML using XML and is therefore almost identical to HTML. However, XHTML is stricter, so there are a few important differences.

Closing tags are required

First, XHTML requires all elements to be closed, so previous optional end tags must be included. Elements that do not have an end tag gets one in the start tag by adding a forward slash before the closing angle bracket. Commonly, there is a space between the tag name and the slash, although this is optional.

<p></p>
<br />

Lowercase tags and attributes

Secondly, XHTML is lowercase-only for all tag and attribute names, unlike HTML which is case-insensitive.

<P>Invalid</P>
<p>Correct</p>

Mandatory quoted values

Third, all attributes must have a value specified. For attributes that do not have any values this means that they must use their own names as their value. Also, double quotes are required around all values.

<p align="left"></p>
<hr noshade="noshade" />

Proper nesting

Fourth, elements must be properly nested. That is, an inner element must be closed before the outer element is closed.

<a><b>Correct</b></a>
<a><b>Invalid</a></b>

XML namespace

In XHTML, an XML namespace must be specified that will be used throughout the document. This is done by placing the xmlns attribute within the <html> start tag. The xmlns attribute can be placed within any element to define one or more alternative namespaces within the document.

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

Declaring encoding

There is an optional XML declaration that can be placed at the top of an XHTML document. This line specifies the XML version and character encoding of the document. Typically, it is set to the current version 1.0 of XML along with the common 8-bit Unicode character set.

<?xml version="1.0" encoding="UTF-8"?>

There is an issue in IE6 with this declaration that causes the document to render incorrectly. Therefore, the header <meta> tag is typically used instead to specify the character encoding.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

DTD required

XHTML must validate against one of the three XHTML Document Type Definitions (DTD), which will be covered in the next chapter. Thus, one of the lines below must be included before the <html> element.

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

To summarize, a standards-compliant XHTML web document includes the following elements.

<!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/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8" />
  <title>Learning XHTML</title>
</head>
<body></body>
</html>
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours