Validating HTML/XHTML
December 28th, 2005
Validating HTML/XHTML implies checking HTML/XHTML file for conformance to W3C recommendations and standards. One can use W3C Markup Validation Service for free. I highly recommend using W3C Markup Validation Service to validate HTML and XHTML as it really helps us to eliminate code errors. However, in my opinion, validating HTML/XHTML is not as important as using this service to remove code errors.
Here are few tips that will help you to validate HTML/XHTML file when needed.
- Use right DocType. Here is a quick list of appropriate DocTypes.
- HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> - HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- HTML 4.01 Transitional
- Follow DocType with Namespace if using XHTML.
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> - Declare Content Type:
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /> - All HTML tags should be in lowercase. However, we do not need to worry about the case for the attribute values or content. Here is an example.
- <P> is wrong
- <p> is right
- Quote all attribute values. Here is an example.
- <table border=0> is wrong
- <table border=”0″> is right
- All attributes require values. Here is an example.
- <input type=”checkbox” checked /> is wrong
- <input type=”checkbox” checked=”checked” /> is right
- Close all tags including empty tags such as the following.
- <img> is wrong
- <img /> is right
- All signs and symbols should be encoded. Here is an example.
- Ram & Sita is wrong
- Ram
Sita is right
- Do not put double dashes within a comment. Here is an example.
- <!- - Invalid - - and wrong - -> is wrong
- <!- - Valid and right - -> is right
- If using JavaScript in the HTML, then validate HTML by the following method. Using cdata in this way, comments the javascript and hence validates HTML.
<script language=”javascript” type=”text/javascript”>
//<![CDATA[
function abcd ( )
//]]>
</script> - If using Flash in the HTML, then validate HTML by the inserting flash in the following way.
<object type=”application/x-shockwave-flash” data=”flash.swf” width=”100″ height=”100″><param name=”movie” value=”flash.swf” /><embed src=”flash.swf” ></embed></object> - Use lowercase when using JavaScripts functions such as onclick, onmouseover, onkeypress and so on.
December 29th, 2005 at 1:28 am
Hi,
Can you show me the W3C documentation on not putting double dashes within a comment? I don’t see that it causes any validation error and I tested upto XHTML 1.0 strict.
BTW - Nice Blog, good material
Caislander
http://www.webxpertz.net/forums/
December 29th, 2005 at 9:21 pm
Dear Caislander,
I’m glad you like my blog. Thanks!
Please view this page. You will see that it does not validate. In fact this comment tag with 2 double dashes within the comment doesn’t work in FireFox. It works in IE only.
Then view this page which validates.
Let me know if you have further questions or comments.
Thanks once again!
September 26th, 2006 at 9:02 am
In your object tag:
you are using the attributes “xsrc” and “mce_src” these casue my page to fail validation. I have not been able to find any documentation on these attributes. What are they?
Thanks
September 27th, 2006 at 8:36 am
Dear Paul,
Good eye! Thanks for pointing it out. My wordpress editor added it by default and I didn’t notice it. Now, it’s corrected. It’s what MS word does to the codes - adds unnecessary attributes. It should be just “src” and not “xsrc” or “mce_src”.
Thanks again,
Shruti