XHTML is a XML application of HTML. It aims to replace HTML and is almost identical to HTML 4.01. It is a stricter and cleaner version of HTML and is case sensitive.
XHTML is a XML application of HTML. It aims to replace HTML and is almost identical to HTML 4.01. It is a stricter and cleaner version of HTML and is case sensitive.
There are billions of web pages around the world, but many of them use 'bad' (incorrect) HTML. While modern day desktop web browsers are fairly tolerant of such errors, with the increasing number of mobile devices and other appliances connected to the Internet, such websites will often be rendered invalid by browsers which tend to be stricter in enforcing standards due to their limited processing and memory capacities.
XHTML ensures that documents adhere to standards. This will result in 'well-formed' documents.
Your website will then be viewable across all browsers, regardless of which connected devices are used. XHTML is backward compatible and highly recommended for all web developers.
Benefits of XHTML
XHTML allows XML-enabled devices to render well-formed documents correctly and efficiently, and offers great potential for processing capabilities through its associated families of XML technologies.
Coding for XHTML is mostly similar to coding for HTML, with the exception that XHTML is much stricter. For an illustration, let's revisit our simple HTML example.
Firstly, insert this line of code into the top of the document:
<?xml version="1.0" encoding="utf-8"?>
It is important to specify what character set the page is using in order to display characters in the desired way. The default UTF-8 is used in this site. This refers to unicode encoding and allows for the proper display of international languages such as Chinese.
Now we need a DOCTYPE declaration before the root element (the html tag). Check out the explore deeper section to find out the reasons behind this. Insert one of the 3 codes below into the top portion of your document:
The first is the strictest of all 3. It tolerates no mistakes in the markup and produces no mistakes in presentation. Use this if you are using CSS.
The second allows some HTML features to be used, and should be used when your site contains legacy HTML tags which cannot be easily replaced, or to support browsers that do not understand CSS.
The third is to be used only when iframes are used in the website. Frames allow one webpage to present more than one HTML document on the same page. We do not recommend the use of frames as it is generally not standards-compliant and tend to run into browser-specific issues.
Also, frames tend to cause more problems for search engines. (Read Google's webmaster help page on its official support for frames)
View Flash illustration of adding valid DOCTYPE
The XHTML DTD
DOCTYPE declaration
The DOCTYPE declaration is not always used in HTML, but it is COMPULSORY in all XHTML documents.
DTD specifies the syntax of a web page in SGML. DTD is used by SGML applications, such as HTML, to specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations.
An XHTML DTD describes in precise, computer-readable language, the allowable rules of XHTML markup.
As mentioned, there are the 3 forms declaration:
The root element, the html tag, should look like this:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">. This marks the document a XHTML one.
Next, we have to check for well-formedness of the document. Ensure that all elements are properly nested. For example:
<p> This <span>is correct.</span></p>
<p> This <span>is wrong.</p></span>
Ensure that all element and attribute names are in lowercase.
<ul> should replace <UL>.
Ensure that all elements have an end tag. <br /> replaces <br> and <p> Paragraph <p> Next paragraph should be replaced by <p> Paragraph </p> <p> Next paragraph </p>
Check the attributes. All attribute values must be quoted like this <div id="box"> and not <div id=box>. Also, a common mistake for checkboxes would be to minimize attributes like this: <input type="checkbox" checked />. Replace the "checked" attribute with checked="checked".
Look out for quotation marks used in the document. If they are part of a normal text, replace it with ".
Do note that if the "id" attribute is used for an element, the id name cannot be repeated for another element. Each element can only have one unique id, but many elements can belong to one class. Also note that the "name" attribute is deprecated in XHTML.
Remember to add an alt attribute to all image tags. This will allow users who turned off images to experience the site fully. The alt attribute behaves like a title for the image.
View Flash illustration of making your page XHTML valid
Next up: Validating the website
No, neither a CD nor registration key is required. Validating your website helps to detect errors and allows you to correct them accordingly. Keep your code standards-compliant.
One recommended link where you can validate your website is W3C website. Errors and warnings in your XHTML coding will then be shown after the website is checked (by either entering the url of the website or by uploading the html/xhtml file).
There is one useful tool called Dave Raggett's 'HTML TIDY'. This free utility will help clean up your HTML code.