This explanation is specifically geared to aid a web developer gain enough practical XHTML (Extensible Hypertext Markup Language) to start using XHTML promptly. If you would like a full technical explanation of what XHTML is as it relates to its XML and SGML heritage, go to the
W3C site and follow the XHTML link.
Browsers processing HTML typically will gracefully accept coding errors and still display the gross page content. Browsers are designed to be more strict when processing XHTML. Essentially, XHTML code must be well-formed. For daily use, this translates to:
[ ] tag names have to be correct
[ ] tag attributes and their values have to be correct
[ ] non-empty tags must be opened and closed correctly
[ ] tag nesting must be correct
[ ] header information is expected to be there and must be correct
XHTML is meant to improve the quality, reliability and interoperability of all web code and should be used.
What Makes Well-formed XHTML
Here's the practical nitty-gritty. The XHTML document must be well-formed by these XML rules:
- XML is case sensitive.
- All element tag names and attribute names must be lowercase. E.g.
<BODY TEXT="#006699"> is not valid.
<body text="#006699"> is valid. - Non-empty elements must have closing tags. E.g.:
<p>text is not valid,
<p>text</p> is valid.
Further,
<p> is not valid to create a paragraph break,
<p></p> is valid. - Allowed empty elements must end with a space and a final forward slash. E.g.
<br> is not valid,
<br/> is not correct,
<br /> is correct.
<img src="icon.png" /> is correct.
The extra space ensures that 4.0 version browsers do not choke on the XHTML tags. - All attribute values must be "quoted". E.g.
<td valign=center> is not valid,
<td valign="center"> is valid. - Attribute minimization is not allowed. E.g.
nowrap or checked must be specified as nowrap="nowrap" and checked="checked" - Attribute values cannot have hard returns in them
- Leading and trailing spaces in attribute values will be trimmed away.
- Only the id attribute can uniquely identify an element. The name attribute should not be used. E.g.:
<img src="icon.png" name="unique" /> is not correct,
<img src="icon.png" id="unique"/> is correct.
An XHTML document should have an XML declaration first. No white space or returns are allowed ahead of it. This is the XML document declaration:
<?xml version="1.0" encoding="iso-8859-1"?>
But this declaration can break older browsers and XML aware browsers don't need it. Yet, this declaration contains the character encoding attribute which is needed, so it should be declared in the subsequent metadata.
The XHTML document must have a valid DOCTYPE declaration. There are three valid ones: Strict, Transitional, and Frameset.
The first doctype declaration, Strict, typically cannot be used because it may break older browsers. Strict means the document must be valid by all XML rules and can only have W3C HTML 4.0 or higher elements. No browser proprietary tags. This is it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The second doctype declaration is the most used. Transitional declaration means the document must be valid by XML rules and can have deprecated HTML tags.This is it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The third doctype, Frameset, is like Transitional except the page can also have frames. This is the declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Here's what the basic XHTML document framework code would look like for an XHTML document:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- xml declaration is not desirable-->
<!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">
<!--html must be first root element -->
<head>
<title>XHTML Document Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- charset must be declared -->
<script language='JavaScript' src='demo.js' type='text/javascript'></script>
<!-- js file include tag needs closing tag -->
<script language='JavaScript' type='text/JavaScript'>
<![CDATA[
... unescaped javascript code. CDATA tag supported by all 3.0+ browsers.
]]>
</script>
<link href="demo.css" rel="stylesheet" type="text/css" />
<!-- css stylesheet include is an empty tag -->
</head>
<body>
.
.
.
</body>
</html>
About the Author:
Peter Sawczynec is Technology Director of PS WebCode, Web Programming and Development Firm in New York City.
Article Source:
www.SEOtoday.net
