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.

Be Sociable, Share!

Comments (11)

  1. 9:13 pm, November 12, 2008TechnoCat  / Reply

    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.

  2. 8:46 am, November 13, 2008asvin  / Reply

    Now it’s valid, I guess I must tell the mybloglog dev team to provide XHTML valid widgets

  3. 5:58 pm, November 13, 2008EllisGL  / Reply

    Where XHTML 1.1?

  4. 9:35 pm, November 16, 2008alex vandranda  / Reply

    nice

  5. 5:36 pm, August 18, 2009Deacon  / Reply

    Nice tips. Im sure people will find it very useful.

  6. 1:22 am, March 22, 2010mozzartut  / Reply

    Nice post :)

    Validate Html:
    http://validator.w3.org/

    Validate Css:
    http://validator.w3.org/

  7. 1:24 am, March 22, 2010mozzartut  / Reply

  8. 3:02 pm, July 15, 2010jhon  / Reply

    Great post :)
    there is great HTML lessons resours here
    http://basics-onlines.com

  9. 10:49 am, July 26, 2010Manali  / Reply

    Nice article actually it very useful for beginner…
    Thanks for sharing…

  10. 9:32 am, August 13, 2010web connect technologies  / Reply

    i think xhtml validation is very useful but many time i have seen many successful website have some error..

  11. 12:39 am, December 22, 2010Nico  / Reply

    thanks, this article is great,

    greetings nokes

Leave a Reply

Allowed Tags - You may use these HTML tags and attributes in your comment.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Pingbacks (0)

› No pingbacks yet.