9 tips to validate your XHTML code
What is validation ?
According to the W3c, Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking and proofreading for grammar and syntax, but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language.
Why taking the trouble to validate your XHTML ?
- Properly written XHTML code will render better, render on more browsers, and render faster than XHTML with errors. It's also more easily adapted to print and alternative browsing devices like mobile phones and handheld computers.
- Properly written XHTML code is more likely to be "future-proof" (backward compatible with future standards and future web browsers).
- Browsers are becoming more standards compliant, and it is becoming increasingly necessary and important to write valid and standards compliant XHTML code
- Poorly written XHTML can greatly reduce the amount of traffic your web site receives from search engines.
- Write XHTML code right the first time and write it once.
- You don't want to look foolish among your friends while not knowing the rules, uh?
Tip 1: Specify a DOCTYPE and namespace
Include a DOCTYPE at the top of your page and specify the namespace
For XHTML1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
For XHTML1.0 Transitional
<!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">
For XHTML1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
Tip 2: Specify the character encoding
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Tip 3: Avoid using deprecated tags and attributes.
Deprecated tags :
- applet
- basefont
- center
- dir
- font
- isindex
- menu
- s
- strike
- u
Deprecated attributes and tags in which they are deprecated :
- align (caption, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p)
- alink, link, vlink (body)
- background (body)
- bgcolor (table, tr, td, th, body)
- border (img, object)
- clear (br)
- compact (dl, ol, ul)
- height (td, th)
- hspace (img, object)
- language (script)
- name (img, a, applet, form, frame, iframe, map)
- noshade (hr)
- nowrap (td, th)
- size (hr)
- start (ol)
- target (a)
- text (body)
- type (li, ol, ul)
- value (li)
- version (html)
- vspace (img, object)
- width (hr, td, th, pre)
Tip 4: All tags in lowercase
All tags and attribute names must be in lower case and attribute values must be between double quotes ("), i.e
<DIV> <Img src="test.jpg" ID=myimage alt='logo' /> </DIV>
is incorrect while correct version goes like this:
<div> <img src="test.jpg" id="myimage" alt="logo" /> </div>
Tip 5: XHTML must be well-formed
All opening tags must have closing ones, or if the tag is empty, like br tag, it must have a closing slash. For e.g
<div> this is a paragraph <br> <hr> <img src="images.jpg" alt="my company"> </div>
is invalid. The correct code:
<div> this is a paragraph <hr /> <img src="images.jpg" alt="my company" /> </div>
Also, tags must be properly nested can can't overlap. An example of bad nesting is
<div><strong>this is a paragraph</div> </strong>
It should be like this in order to validate:
<div> <strong>this is a paragraph</strong> </div>
Tip 6: Images must always have alt attribute
According to the W3C recommendations, the "alt" attribute specifies an alternate text for user agents that cannot display images. Including the alt attribute will not only validate your code but also improve your search engine rankings. In Google's webmaster guidelines, they advise the use of alternative text for images since they can't see the images. Instead they rely on the alt attribute.
Correct code :
<img src="images/logo.jpg" alt="My Company" />
Tip 7: Surround your javascript between CDATA tags
If you're not using external javascript files, to prevent the validator from spitting errors from your javascript code,
simply surround them within CDATA tags, like this:
<script type="text/javascript"> /* <![CDATA[ */ var myfunction = function(){ }; /* ]]> */ </script>
Tip 8 : Encode HTML character entities
<!-- incorrect --> my brother & me <!-- correct --> my brother & me
Tip 9: Correct way to embed flash movies
Code which won't validate
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="30" height="30"><param name="movie" value="music/sound.swf"><param name="quality" value="high"><embed src="music/sound.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="30" height="30"></embed></object>
Correct way to embed flash movies
<object type="application/x-shockwave-flash" data="music/sound.swf" width="0" height="0"><param name="movie" value="music/sound.swf" /><param name="quality" value="high"/></object>
Or if you want you can use swfobject which offers optimized Flash Player embed methods.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
This website telling me to validate my XHTML isn’t even valid XHTML.
http://validator.w3.org/check?uri=http%3A%2F%2Fhtmlblog.net%2F9-tips-to-validate-your-xhtml-code%2F&charset=(detect+automatically)&doctype=Inline&group=0
But I strongly agree in validating code. It is sad how much of the internet runs on quirks mode.