Introduction
The chapter demonstrates about the HTML XHTML which shows difference between the HTML and XHTML and also working of the XHTML. The following are the concepts covered.
- About XHTML
- Presentation of XHTML
Description
XHTML stands for Extensible Hypertext Markup Language and user can also referred as XML and it is stricter then HTML.
The HTML documents works fine in the browser even though user not followed the rules. But with XML user need to follow the rules of XML. The XHTML documents must specify document type as XHTML which is the combination of both HTML and XML files. The sample code of XHTML document is shown below.
[html]
<html>
<head>
<title>HTML Document</title>
</head>
<body>
<h1>HTML
<p>This is a paragraph
</body>
</html>
[/html]
Description
XHTML is a combination of both HTML and XML, and also known as redesigned of XML because it was developed to overcome the problems faced in HTML. Few differences are listed below.
In XHtml <!DOCTYPE> is mandatory which contain complete information about the document and user need to follow the proper basic tags of the html document. The basic sample code of XHTML with complete <!DOCTYPE> declaration is shown below.
[html]
<!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>
<title>Title of document</title>
</head>
<body>
Content of the Document
</body>
</html>
[/html]
User need to close all the tags properly sample snippet is shown below.
[html]
<p>Splessons</p>
<p>Simple Programming Lessons</p>
[/html]
Names of the XHTML document must be in lower case the snippet code is shown below.
[html]
<table width=”100%”>
[/html]
XHTML is elements and its attributes must be in lower case like in below example.
Incorrect
[html]
<DIV>Divison Content</DIV>
[/html]
Correct
[html]
<div>Division Content </div>
[/html]
Incorrect.
[html]
<table WIDTH="”100%”">
[/html]
Correct
[html]
<table width="”100%”">
[/html]
[html]
<html>
<!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>XHTML - Basic</title>
</head>
<body>
This is simple XHTML example.
<div> Division Content </div>
<table width=”100%”>
</table>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Structure | Elements | Attributes |
|---|---|---|
| <!Doctype> is mandatory. | User need to nested elements are properly. | Names must be in lower case. |
| xmlns attribute is mandatory. | User need to close the elements properly. | User need to maintain the attribute values in quoted. |
| ,,,are mandatory./td> | Xhtml must have one root element. | Minimization of attributes is forbidden. |
Key Points
- <!DOCTYPE> type is mandatory and should be present on top of the page.
- Attribute values must maintain quotes.
- User need to close the empty elements.