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>
	<p>this is a paragraph</p>
	<br>
	<hr>
	<img src="images.jpg" alt="my company">
</div>

is invalid. The correct code:

<div>
	<p>this is a paragraph</p>
	<br />
	<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

<p>
	<div><strong>this is a paragraph</div></strong>
</p>

It should be like this in order to validate:

<div>
	<p><strong>this is a paragraph</strong></p>
</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 &amp; 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.

HTML entities within XSL

You want to have


in your XSL stylesheet but you’re getting an error, just put these few lines of code at the top, before the


tag :

<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp "&#160;">
<!ENTITY AElig "&#198;">
<!ENTITY AMP "&amp;#38;">
<!ENTITY Aacute "&#193;">
<!ENTITY Acirc "&#194;">
<!ENTITY Agrave "&#192;">
<!ENTITY Alpha "&#913;">
<!ENTITY Aring "&#197;">
<!ENTITY Atilde "&#195;">
<!ENTITY Auml "&#196;">
<!ENTITY Beta "&#914;">
<!ENTITY COPY "&#169;">
<!ENTITY Ccedil "&#199;">
<!ENTITY Chi "&#935;">
<!ENTITY Dagger "&#8225;">
<!ENTITY Delta "&#916;">
<!ENTITY ETH "&#208;">
<!ENTITY Eacute "&#201;">
<!ENTITY Ecirc "&#202;">
<!ENTITY Egrave "&#200;">
<!ENTITY Epsilon "&#917;">
<!ENTITY Eta "&#919;">
<!ENTITY Euml "&#203;">
<!ENTITY GT "&#62;">
<!ENTITY Gamma "&#915;">
<!ENTITY Iacute "&#205;">
<!ENTITY Icirc "&#206;">
<!ENTITY Igrave "&#204;">
<!ENTITY Iota "&#921;">
<!ENTITY Iuml "&#207;">
<!ENTITY Kappa "&#922;">
<!ENTITY LT "&amp;#60;">
<!ENTITY Lambda "&#923;">
<!ENTITY Mu "&#924;">
<!ENTITY Ntilde "&#209;">
<!ENTITY Nu "&#925;">
<!ENTITY OElig "&#338;">
<!ENTITY Oacute "&#211;">
<!ENTITY Ocirc "&#212;">
<!ENTITY Ograve "&#210;">
<!ENTITY Omega "&#937;">
<!ENTITY Omicron "&#927;">
<!ENTITY Oslash "&#216;">
<!ENTITY Otilde "&#213;">
<!ENTITY Ouml "&#214;">
<!ENTITY Phi "&#934;">
<!ENTITY Pi "&#928;">
<!ENTITY Prime "&#8243;">
<!ENTITY Psi "&#936;">
<!ENTITY QUOT "&#34;">
<!ENTITY REG "&#174;">
<!ENTITY Rho "&#929;">
<!ENTITY Scaron "&#352;">
<!ENTITY Sigma "&#931;">
<!ENTITY THORN "&#222;">
<!ENTITY TRADE "&#8482;">
<!ENTITY Tau "&#932;">
<!ENTITY Theta "&#920;">
<!ENTITY Uacute "&#218;">
<!ENTITY Ucirc "&#219;">
<!ENTITY Ugrave "&#217;">
<!ENTITY Upsilon "&#933;">
<!ENTITY Uuml "&#220;">
<!ENTITY Xi "&#926;">
<!ENTITY Yacute "&#221;">
<!ENTITY Yuml "&#376;">
<!ENTITY Zeta "&#918;">
<!ENTITY aacute "&#225;">
<!ENTITY aafs "&#8301;">
<!ENTITY acirc "&#226;">
<!ENTITY acute "&#180;">
<!ENTITY aelig "&#230;">
<!ENTITY agrave "&#224;">
<!ENTITY alefsym "&#8501;">
<!ENTITY alpha "&#945;">
<!ENTITY and "&#8743;">
<!ENTITY ang "&#8736;">
<!ENTITY aring "&#229;">
<!ENTITY ass "&#8299;">
<!ENTITY asymp "&#8776;">
<!ENTITY atilde "&#227;">
<!ENTITY auml "&#228;">
<!ENTITY bdquo "&#8222;">
<!ENTITY beta "&#946;">
<!ENTITY brvbar "&#166;">
<!ENTITY bull "&#8226;">
<!ENTITY cap "&#8745;">
<!ENTITY ccedil "&#231;">
<!ENTITY cedil "&#184;">
<!ENTITY cent "&#162;">
<!ENTITY chi "&#967;">
<!ENTITY circ "&#710;">
<!ENTITY clubs "&#9827;">
<!ENTITY cong "&#8773;">
<!ENTITY copy "&#169;">
<!ENTITY crarr "&#8629;">
<!ENTITY cup "&#8746;">
<!ENTITY curren "&#164;">
<!ENTITY dArr "&#8659;">
<!ENTITY dagger "&#8224;">
<!ENTITY darr "&#8595;">
<!ENTITY deg "&#176;">
<!ENTITY delta "&#948;">
<!ENTITY diams "&#9830;">
<!ENTITY divide "&#247;">
<!ENTITY eacute "&#233;">
<!ENTITY ecirc "&#234;">
<!ENTITY egrave "&#232;">
<!ENTITY empty "&#8709;">
<!ENTITY emsp "&#8195;">
<!ENTITY ensp "&#8194;">
<!ENTITY epsilon "&#949;">
<!ENTITY equiv "&#8801;">
<!ENTITY eta "&#951;">
<!ENTITY eth "&#240;">
<!ENTITY euml "&#235;">
<!ENTITY exist "&#8707;">
<!ENTITY fnof "&#402;">
<!ENTITY forall "&#8704;">
<!ENTITY frac12 "&#189;">
<!ENTITY frac14 "&#188;">
<!ENTITY frac34 "&#190;">
<!ENTITY frasl "&#8260;">
<!ENTITY gamma "&#947;">
<!ENTITY ge "&#8805;">
<!ENTITY hArr "&#8660;">
<!ENTITY harr "&#8596;">
<!ENTITY hearts "&#9829;">
<!ENTITY hellip "&#8230;">
<!ENTITY iacute "&#237;">
<!ENTITY iafs "&#8300;">
<!ENTITY icirc "&#238;">
<!ENTITY iexcl "&#161;">
<!ENTITY igrave "&#236;">
<!ENTITY image "&#8465;">
<!ENTITY infin "&#8734;">
<!ENTITY int "&#8747;">
<!ENTITY iota "&#953;">
<!ENTITY iquest "&#191;">
<!ENTITY isin "&#8712;">
<!ENTITY iss "&#8298;">
<!ENTITY iuml "&#239;">
<!ENTITY kappa "&#954;">
<!ENTITY lArr "&#8656;">
<!ENTITY lambda "&#955;">
<!ENTITY lang "&#9001;">
<!ENTITY laquo "&#171;">
<!ENTITY larr "&#8592;">
<!ENTITY lceil "&#8968;">
<!ENTITY ldquo "&#8220;">
<!ENTITY le "&#8804;">
<!ENTITY lfloor "&#8970;">
<!ENTITY lowast "&#8727;">
<!ENTITY loz "&#9674;">
<!ENTITY lre "&#8234;">
<!ENTITY lrm "&#8206;">
<!ENTITY lro "&#8237;">
<!ENTITY lsaquo "&#8249;">
<!ENTITY lsquo "&#8216;">
<!ENTITY macr "&#175;">
<!ENTITY mdash "&#8212;">
<!ENTITY micro "&#181;">
<!ENTITY middot "&#183;">
<!ENTITY minus "&#8722;">
<!ENTITY mu "&#956;">
<!ENTITY nabla "&#8711;">
<!ENTITY nads "&#8302;">
<!ENTITY nbsp "&#160;">
<!ENTITY ndash "&#8211;">
<!ENTITY ne "&#8800;">
<!ENTITY ni "&#8715;">
<!ENTITY nods "&#8303;">
<!ENTITY not "&#172;">
<!ENTITY notin "&#8713;">
<!ENTITY nsub "&#8836;">
<!ENTITY ntilde "&#241;">
<!ENTITY nu "&#957;">
<!ENTITY oacute "&#243;">
<!ENTITY ocirc "&#244;">
<!ENTITY oelig "&#339;">
<!ENTITY ograve "&#242;">
<!ENTITY oline "&#8254;">
<!ENTITY omega "&#969;">
<!ENTITY omicron "&#959;">
<!ENTITY oplus "&#8853;">
<!ENTITY or "&#8744;">
<!ENTITY ordf "&#170;">
<!ENTITY ordm "&#186;">
<!ENTITY oslash "&#248;">
<!ENTITY otilde "&#245;">
<!ENTITY otimes "&#8855;">
<!ENTITY ouml "&#246;">
<!ENTITY para "&#182;">
<!ENTITY part "&#8706;">
<!ENTITY pdf "&#8236;">
<!ENTITY permil "&#8240;">
<!ENTITY perp "&#8869;">
<!ENTITY phi "&#966;">
<!ENTITY pi "&#960;">
<!ENTITY piv "&#982;">
<!ENTITY plusmn "&#177;">
<!ENTITY pound "&#163;">
<!ENTITY prime "&#8242;">
<!ENTITY prod "&#8719;">
<!ENTITY prop "&#8733;">
<!ENTITY psi "&#968;">
<!ENTITY rArr "&#8658;">
<!ENTITY radic "&#8730;">
<!ENTITY rang "&#9002;">
<!ENTITY raquo "&#187;">
<!ENTITY rarr "&#8594;">
<!ENTITY rceil "&#8969;">
<!ENTITY rdquo "&#8221;">
<!ENTITY real "&#8476;">
<!ENTITY reg "&#174;">
<!ENTITY rfloor "&#8971;">
<!ENTITY rho "&#961;">
<!ENTITY rle "&#8235;">
<!ENTITY rlm "&#8207;">
<!ENTITY rlo "&#8238;">
<!ENTITY rsaquo "&#8250;">
<!ENTITY rsquo "&#8217;">
<!ENTITY sbquo "&#8218;">
<!ENTITY scaron "&#353;">
<!ENTITY sdot "&#8901;">
<!ENTITY sect "&#167;">
<!ENTITY shy "&#173;">
<!ENTITY sigma "&#963;">
<!ENTITY sigmaf "&#962;">
<!ENTITY sim "&#8764;">
<!ENTITY spades "&#9824;">
<!ENTITY sub "&#8834;">
<!ENTITY sube "&#8838;">
<!ENTITY sum "&#8721;">
<!ENTITY sup "&#8835;">
<!ENTITY sup1 "&#185;">
<!ENTITY sup2 "&#178;">
<!ENTITY sup3 "&#179;">
<!ENTITY supe "&#8839;">
<!ENTITY szlig "&#223;">
<!ENTITY tau "&#964;">
<!ENTITY there4 "&#8756;">
<!ENTITY theta "&#952;">
<!ENTITY thetasym "&#977;">
<!ENTITY thinsp "&#8201;">
<!ENTITY thorn "&#254;">
<!ENTITY tilde "&#732;">
<!ENTITY times "&#215;">
<!ENTITY trade "&#8482;">
<!ENTITY uArr "&#8657;">
<!ENTITY uacute "&#250;">
<!ENTITY uarr "&#8593;">
<!ENTITY ucirc "&#251;">
<!ENTITY ugrave "&#249;">
<!ENTITY uml "&#168;">
<!ENTITY upsih "&#978;">
<!ENTITY upsilon "&#965;">
<!ENTITY uuml "&#252;">
<!ENTITY weierp "&#8472;">
<!ENTITY xi "&#958;">
<!ENTITY yacute "&#253;">
<!ENTITY yen "&#165;">
<!ENTITY yuml "&#255;">
<!ENTITY zeta "&#950;">
<!ENTITY zwj "&#8205;">
<!ENTITY zwnj "&#8204;">
<!ENTITY zwsp "&#0203;">
]>