XHTML

This is an Article Regarding the XHTML(XML&HTML).

XHTML


XHTML is HTML "reformulated" to conform to the current Extensible Markup Language (XML) standard, version 1.0. Imagine taking the best parts from the HTML language and mixing them with all of the great aspects of XML… then you're coming close to imagining the power and flexibility of XHTML.

XHTML has much stricter language syntax that HTML, however. To create fully valid XHTML documents, they must adhere to these rules/guidelines:

All Tags Must Be Closed


With normal HTML documents, some browsers will still render the contents of a even if you don't close the table with a
tag. This allows developers to become lazy and forgetful. The tags within an XHTML document must always be nested correctly and closed properly.


<table width="100%">
<tr>
<td>
<p><b>Welcome to my page
</td>
</tr>
</table>
<hr>



you can see straight away that the <p>, <b>, and <hr> tags aren't closed. This is a big no-no for XHTML documents and will raise a parser error, because all tags must be closed(yes, even the <p> tag).

Attributes Must contain quoted values


All tag attributes, such as <p align="center"> must be enclosed within double quotes. You no longer have the choice of either single or double quotes. Also, for attributes which have no value, or aren't quoted such as,


<option checked>1</option>


you must assign a value to that attribute (even though it wont be used), and surround it in double quotes, for example:


<option checked="checked">1</option>

All element and attribute names must also be lower case.

Special Characters


XHTML documents are validated and must conform to specific rules,
In HTML Like,

<!-- This is a commenting line -->


as well as inline style sheets and inline JavaScript
should always be removed from your XHTML document.

Last but not least, with the exception of form input elements such as <input>, <select>, you should use the "id" attribute instead of "name" when attaching attributes to an element. In XHTML documents, the "name" attribute is rendered useless (again, apart from form elements), and belongs back with HTML 4.0.


XHTML documents are backward compatible with older, non-XHTML compliant web browsers. Instead of sloppy HTML tags, your pages will now contain XML tags that are always properly closed and nested correctly.

DTD'S


XHTML documents have three parts: the DOCTYPE (which contains the DTD declaration), the head and the body. To create web pages that properly conform to the XHTML 1.0 standard, each page must include a DTD declaration; either strict, transitional, or frameset. Each of the three DTD's is described (with an example) below:

You should use the strict DTD when your XHTML pages will be marked up cleanly, free of presentational clutter.

The strict DTD looks like this:

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


The transitional DTD should be used when you need to take advantage of the presentational features that are available through HTML.

The transitional DTD looks like this:

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


You should use the frameset DTD when your XHTML page will contain frames. The frameset DTD looks like this:


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


This example used the strict DTD, meaning that every single tag must be closed properly, all attributes assigned values, etc:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Strict DTD XHTML Example </title>
</head>
<body>
<p>
Please Choose a Day:
<br /><br />
<select name="day">
<option selected="selected">Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
</select>
</p>



This example uses the transitional DTD, which provides support for older browsers that don't recognize style sheets


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Transitional DTD XHTML Example </title>
</head>

<body bgcolor="#FFFFFF" link="#000000" text="red">
<p>This is a transitional XHTML example</p>
</body>
</html>



This example uses the frameset DTD, which allows us to split one XHTML page into multiple frames,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Frameset DTD XHTML Example </title>
</head>

<frameset cols="100,*">
<frame src="toc.html" />
<frame src="intro.html" name="content" />
</frameset>
</html>



XHTML documents look more professional and eradicate sloppy coding habits. They still allow us to develop pages for older browsers, however, by using the transitional DTD declaration.

Although we're along way from every site on the web becoming XHTML compliant, it's good to know that there are standards set in place that we can follow as professional web developers.


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: