I often get asked by budding web developers what the difference is between HTML and XHTML. The truth is, there isn’t a lot of difference between HTML 4.01 and XHTML, and most of the rules of XHTML you should be using regardless to maintain tidier code. So, if you already know HTML 4 through and through, just bear in mind the following points and you can put XHTML on your CV/resume too!
- XHTML elements must be in lowercase
The lowercase rule is the easiest one to remember, and one you should always use for best practice regardless of the version of HTML anyway. For example,
<INPUT TYPE="TEXT" MAXLENGTH="50" VALUE="Web Developer" />
Should be written as:
<input type="text" maxlength="50" value="Web Developer" />
Please note, while elements and attribute names should be in lower case, attribute values that are not pre-defined (eg: value or label) can be mixed case. Strictly speaking, any attribute values can be in mixed case, but code looks tidier if lower case is used whereever possible.
- XHTML elements must always be closed
Always make sure you close your HTML elements. Non-empty elements (elements which contain information outside their tags) should be followed by a closing element. A classic example of where I see this ignored is with a list or select object as shown below:
<select> <option>List item 1 <option>List item 2
A select object should be coded as follows:
<select> <option>List item 1</option> <option>List item 2</option> </select>
Additionally, empty elements such as <br>, <input> and <img src=”…”> should be terminated with a trailing space and slash, and therefore be written as <br />, <input /> and <img src=”…” /> to show there is no closing element.
- XHTML elements must be nested correctly properly nested
Again, this is best practice which has finally been enforced in XHTML. Instead of writing the following (which I hope none of you do anyway):
<b><u>Hello World!</b></u>
XHTML elements have to be properly nested within one another, as so:
<b><u>Hello World!</u></b>
- XHTML documents must have one root element
With the exception of DOCTYPE, all elements within your page should be contained within the <HTML> element. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Title of page</title> </head> <body> <p>Body of page</p> </body> </html> - All XHTML attribute values must be quoted
Must sure all attribute values have double quotes around them. For example:
<input type=text />
Should actually be:
<input type="text" />
Why use XHTML? In short it’s just easier to read and maintain, and will be XSL ready should it ever be required.
Happy XHTML-ing your code!
Tags: differences, HTML, markup, tags, XHTML
Loading ...
Leave a Reply