Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


How do I validate my Web HTML pages?

How do I validate my Web pages and end up with one of those nifty "xhtml 1.0 verified" graphics for my page?

Dave's Answer:

In the beginning of the Web, web browsers were lazy and HTML coders were sloppy, trusting that if things 'just kinda worked alright' that it was time to move on to the next page. As the HTML language and its descendents began to evolve into ever-more-powerful systems (e.g., XML, JavaScript, CSS), it began to be a problem that sloppy HTML was so pervasive.

Worse, the World Wide Web Consortium published a formal, but almost incomprehensible specification that detailed exactly the valid and legal HTML language structure for each generation of HTML.

Enter validators.

The idea of a validator is that you can feed it the address of a Web page, specify exactly what 'flavor' of HTML you've written it in, and it'll then parse and analyze the actual tag structure to see if it's all legal. There are a surprisingly large number of different flavors of HTML too, but the newest and most important is called XHTML, a slight twist on HTML 4 that enforces XML-based syntax.

In a nutshell, this means that you can't do something like this:

    Sample line one.
    <p>
    Sample line two.
    <P align=center>
    Sample line<br>three.

Why? Because the paragraph tag is a container tag: it needs a closing </p> each time it's used. Further, all xhtml tags MUST be in all lowercase, so the second <P> is wrong in that regard too. Finally, every argument must be quoted (e.g., align="center") and every non-paired tag must end with the rather odd looking space+slash+angle sequence: <br /> not <br>

So why bother? Because as more sophisticated Web-based tools appear on the network, they are more and more relying on properly formed pages. Ditto the latest generation of browsers. And in general, it's just good karma to have clean, properly written pages, just as it's best to communicate with proper spelling and grammar.

STRUCTURING A PAGE FOR VALIDATION

So that's the long answer as to why validation is useful. To actually validate a Web page you need to do two things:

  1. Add an XML type definition to the very top of the page. I use this:
    <?xml version="1.0" encoding="UTF-8"?>
    This indicates that I'm using 8-bit Unicode (you'll probably be using the same on your page: you can safely copy this without knowing more about it than 'it's gotta be there')
  2. Add an HTML or XHTML data definition reference line. I use this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    This says that I'm writing "xhtml 1.0 transitional" code. There are lots of different types of DOCTYPE, as alluded to earlier in my message. You can find a list of 'em at the w3.org Web site, if you're curious.

TO VALIDATE YOUR PAGE

To validate your Web page, once you've added the ?xml and !DOCTYPE header lines as detailed, go to http://validator.w3.org/ and enter the full URL of the page. You can also upload files directly to their validator, but since I always have my projects online in a work directory, I let them find it directly.

If everything looks good, you'll run the validator and, assuming you're also writing to xhtml 1.0 transitional, it'll come back with the cheery message:

This Page Is Valid XHTML 1.0 Transitional!

Otherwise you'll see:

This page is not Valid XHTML 1.0 Transitional!

and it'll give a detailed list of the problems it found and why they're a problem. Fix them, submit the URL again, and you should be able to get to the success message.

Then, finally, at the bottom of that page is the information on how to link to the neato graphical buttons on your own validated pages.


Related HTML, JavaScript and Web Site Programming articles:
✔   How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....
✔   Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...
✔   Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....
✔   How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...
✔   How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...

Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
    Enter your name: and your email addr:  









Reader Comments To Date: 5

David Corking said, on June 10, 2005 11:01 AM:

Dave,

Is HTML 4.01 more useful than XHTML 1.0 ?

There is a bit of advocacy building up against using XHTML until there is a widely-used version of IE that supports it. I read this article and it concerns me:
http://hixie.ch/advocacy/xhtml

Since I rarely use IE, and XHTML support (with the proper MIME type) in IE seems to be a long time coming, I am concerned to choose the right standards for my first websites.

What have been your choices of standards, and why have you made them?

My plan right now is to ignore the naysayers, stick with the new XHTML standard (validated 1.0 Strict), test in IE6 to make sure it looks ok, and hope for the best regarding IE5 and IE5.5.

David

Dave Taylor said, on June 10, 2005 11:01 PM:

I don't fully understand your comment, David, because the difference between well-formed HTML 4.01 and well-formed XHTML is so miniscule that I can't imagine anyone be pro or against any of it. I mean, in HTML you'd write a tag like <hr> and in XHTML you'd write <hr />

Is there really enough to quibble over?

David Corking said, on June 11, 2005 9:40 AM:

Thanks, Dave - you have alleviated my concerns.
I didn't realise the differences between SGML and XML were that small.
I thought that I would upset IE by closing out every tag and using an XML DTD.
I see now that you have picked XHTML 1.0 Transitional for this site and it is clearly working well for you.

Ross Sakey said, on March 29, 2008 5:58 PM:

Hi Dave,

How do i get to draw a line across the two cells/parts of the "Interests" panel of my myspace profile. (using xhtml code)
(This is an obvious request, which most people would wish to know, but it is fiendishly difficult to get any type of clear and relevant explanation on.)

I am just learning HTML coding etc.

I was using to great effect until the browser suddenly decided to not recognise it.

After some research on google i came to the conclusion that myspace was now using XHTML.
Hence will not work.

If you check my site you will see that i have managed OK with stopping the Text from Wrapping by using 100 m as advised.
I have been able to enter links etc on one line so they make more sense to the uninitiated.

But stubbornly refuses to work using this method and wraps halfway. Grrr!!!!

(I wish to draw a line under each section containing a Band Logo/Photo & Link, so as to make it more obvious which part is related to which etc.)

Sorry if this is a bit of a long winded explaination.

Cheers!

Ross Sakey

Pat said, on October 21, 2010 5:07 PM:

There are some easy to follow guidelines when you run the validation www.webauditapp.com - I came across it when doing some W3C validation.

Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

I do have a comment, now that you mention it!











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.