Looking for the lessons? Get started!
How to validate your code, and why you should.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
These technologies, which we call "web standards," are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web. — Web Standards Group
Even the most proficient Web designers sometimes fail to validate their documents — checking a Web document against the existing, DOCTYPE-specific technical specifications. This is always a mistake. HTML and CSS validation does not guarantee perfect Web documents, and some truly heinous Web sites can be designed that are completely valid. However, there are compelling reasons why you should make every effort to learn HTML- and CSS-valid standards, and comply with them. It's best practice.
Note: There's a W3C validator for mobile devices as well.
Validating your Web page won't guarantee that it will appear just the way you want it. It only ensures that your code is free of syntax errors. As Roger Johannson writes:
Note that "works in any web browser" does not mean "looks the same in every web browser." Making a document look identical across browsers and platforms is next to impossible. Not even using only images will make a website look exactly the same everywhere. Documents that are published on the web will be accessed by a wide variety of browsing devices on several operating systems, with monitors of differing size and quality (or no monitor at all), by users who may have changed their browser's default text size and other preferences. Realising this and accepting that you simply cannot fully control the visual appearance of a website in your visitors' browsers will make your life a lot less frustrating. Anyone who creates websites needs to understand that there are technical prerequisites to consider, the same way as those who publish on paper or make movies or television have other prerequisites to consider.
Having said that, let's look at some reasons why you should validate your designs. (Much of the following information is sourced from an article by Nick Kew and provided to the World Wide Web Consortium, , a classic 2003 article from Mark Pilgrim, the Roger Johannson article cited above, and from Opera's Web Standards Curriculum set of hands-on tutorials; other sources are used and cited wherever applicable.)
Validation Helps You Find Errors
This may sound like a "duh" statement, but often designers like you (and me) sit and stare at dysfunctional Web pages for minutes, hours, or even days trying and failing to find an error that is breaking your site. Validation can often find those small, hard-to-spot errors almost instantly. Pilgrim writes: "[T]he validator is an automated tool that can highlight small but important errors that are difficult to track down by hand, and may actually solve the problem that's driven you crazy. If you create valid markup most of the time, you can take advantage of this automation to catch your occasional mistakes. But if your markup is nowhere near valid, you'll be flying blind when something goes wrong. The validator will spit out dozens or even hundreds of errors on your page, and finding the one that is actually causing your problem will be like finding a needle in a haystack." As you learn to write valid code, you will make fewer errors, and the validator will actually be more useful in finding the few mistakes that have crept into your code.
Ensuring Pages Display as Identically as Possible across Different Browsers
While most modern browsers manage to sort out a lot of error-riddled HTML pages, the errors are not always caught and handled gracefully. Worse, different browsers don't handle errors the same way, resulting in differences in style, appearance, layout, and/or even function. Kew writes:
"Using standard, interoperable markup and stylesheets, on the other hand, offers a much greater chance of having one's page handled consistently across platforms and user-agents. Indeed, most developers creating rich Web applications know that reliable scripting needs the document to be parsed by [browsers] without any unexpected error, and will make sure that their markup and CSS is validated before creating a rich interactive layer. When surveyed, a large majority of Web professionals will state that validation errors is the first thing they will check whenever they run into a Web styling or scripting bug."
Faster Downloading and Rendering of Your Pages
Not only does CSS make HTML pages smaller, leaner, and more efficient, thereby speeding their download time, clean and valid code ensures that the browsers are not slowed by quirky, erratic, or broken code.
Better Accessibility
Disabled users employing screen readers and other "assistive technologies" will be far better served by clean, standards-compliant HTML and CSS.
Opera's Chris Mills writes:
[O]ne of the big issues on the Web is making web sites accessible to everyone, no matter who they are, regardless of circumstance. This includes making web sites usable by people with disabilities such as blindness/visual impairment and motor impairment (ie, people who have restricted movement, and might not be able to use their hands properly, or at all). By using web standards and best practices, you’ll be able to make your web sites usable by this significant group of the web audience with no extra effort.
Coding for the Future
Creating error-free, standards-valid HTML and CSS is the best guarantee that your Web pages remain consistent, accurate, and functional as possible as time wears on, browsers update, and standards change. W3C tells us, "Validation is one of the simplest ways to check whether a page is built in accordance with Web standards, and provides one of the most reliable guarantee that future Web platforms will handle it as designed."
Teaching Best Practices
As noted above, writing valid, standards-compliant code is best practice for Web design. It also teaches and encourages best practices for Web design. While many veterans have learned to create error-free code and make relatively few validation errors, most beginners make more errors. Computer validation checks can help beginners learn from their mistakes.
Increasing Your Search Engine Ranking
Web designer and marketer Christine Churchill notes, "Bad HTML can hurt your site in the search engines without you ever realizing it. ... While [modern ] browsers are very forgiving of your HTML errors, search engine spiders aren't nearly as kind. It helps to think of a search engine spider as a web browser — just like a browser, the spider needs to interpret your page and figure out what you're saying. Only then can it properly index your page. Search engine spiders also care about the structure of your Web page because they give extra weight to keywords placed inside certain HTML tags." She notes that most beginners will almost certainly find validating their sites frustrating, tedious, and even pointless. But as the beginner improves his/her skills, the number of errors will decrease, the site design will improve, and the frustration will decrease. Johannson agrees: "The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this generally improves search engine rankings."
Search strategist and online marketing expert Joost de Valk agrees that designing to Web standards helps optimize sites for search engines. You might take a close look at de Valk's article to see how he reorganized his site structure to make it more user- and SEO-friendly. He concludes:
A good site structure is a requirement for Search Engine Optimization. It allows both your users and search engines to find content within your site more easily. A good structure is well categorized, and pages within it only link to other pages on the same topic.
De Valk also writes a useful article on POSH, or "Plain Old Semantic HTML", a popular paradigm of standards-based practices. If you follow Web standards and best practices as delineated in this site, you're pretty much following POSH standards as well.
Simpler Adaptation
Coding to Web standards helps ensure that your sites work not only with different operating systems (Windows, Mac, Linux), but with alternative browsing systems, including mobile phones, televisions, PDAs, gaming consoles, and iPads. While these devices often have limitations such as screen size, processing power, and others, if you adhere to current standards, you can be all but certain that your site will work on all of these devices. Mills reminds designers: "There are more mobile phones in the world than PCs, a lot of which are Internet-capable, so can you or your clients afford to miss out on this market?"
Ensuring Others are Willing to Help You Fix Your Problem
I learned to code by trial and error, and by frequently shouting for assistance on the SitePoint forums. One reason why I've stayed with SitePoint for years is their acceptance of me as (then) a newbie Web designer (and now a journeyman designer who still asks "duh" questions), and their willingness to walk me through my mistakes. But more than once they advised me to validate my code and come back. They were far nicer about it than most people are willing to be. Pilgrim points this out in his essay: typically, the new designers creates a "Help!" post on some design forum, and is told, "Validate your code and then come back if you need help." Sometimes the questioners come back, often they do not. If you validate your code, fix the errors you know how to fix, and then shout for help on an expert forum, you're far more likely to get the assistance you need.
A Sign of Professionalism
Creating valid, error-free Web sites is a strong sign that the designer adheres to professional standards. Kew writes: "Seasoned, able professionals will take pride in creating Web content using semantic and well-formed markup, separation of style and content, etc. Validation can then be used as a quick check to determine whether the code is the clean work of a seasoned HTML author, or quickly hacked-together tag soup."
Why Don't Big Corporate Sites Pass Validation?
In June 2008, Web entrepeneur Jonathan Lane noted that the Web sites of 35 (out of 40) Fortune 500 companies failed validation. One of the most spectacular failures was of Amazon's Web site; other validation failures were registered for Microsoft.com, Google.com, Apple.com, Yahoo.com, MySpace.com, and many other Web behemoths. Take a look at Jonathan's chart below, which shows the breakdown among valid and invalid corporate sites. (This graph is from mid-2008, so I'm sure things have changed somewhat since then. But I doubt that much...)
(Image from Jonathan Lane's article cited above, used under the Creative Commons free distribution license.)
There are any number of reasons why large, expansive (and undoubtedly expensive) Web sites for such firms. Lane speculates that Amazon's 1500 validation errors (including the lack of a DOCTYPE!) comes from a failure to upgrade their site management system. Other, less flagrantly invalid corporate sites may be from inattention, a failure of their content management systems to produce valid code, lack of willingness to create standards-compliant code, ignorance, or laziness. Or all of the above.
Summing Up
My friend Tommy Olsson sums it up nicely:
Why should we spell-check our text before publishing it on the web? Because mistakes and errors can confuse readers and detract from the important information. The same can be said for markup. Invalid markup can confuse browsers, search engines and other user agents. The result can be improper rendering, dysfunctional pages, pages that remain unindexed by the search engines, program crashes or the end of the universe as we know it! If our page doesn't display the way we intended, we should always validate our markup before we start looking for other problems ... With invalid markup, there are no guarantees.
On the other hand, Jukka Korpela gives us a useful caveat:
Validation is about catching some syntax errors, nothing more. It is useful only if you know the syntax rules so that you can see what's wrong. Validation does not do anything that you would not be able to do on your own. Validation is useful because you, being presumably human, are not particularly good at following formal rules or checking that they are obeyed. Thus, a validator does not teach you how to write HTML. It just points out mistakes. You are supposed to learn HTML from other sources.
Korpela provides an interesting and useful essay on the limitations of validating your HTML and CSS, and the misunderstandings many people bring to the concept of validation.
In that same vein, a poster on the Pilgrim article writes: "There is a problem though, at a certain level of knowledge, that you need a little help to understand what validation is and how to use a validator. I had a real steep learning curve when I started doing web standards stuff, and frankly I got a bit peeved at RTFM type comments. Sometimes you don't have quite enough knowledge to know WHY that part of the manual is of use to you." He is absolutely right. Validators can be confusing and frustrating for beginners to use.
The Wikipedia article on the popular W3C validation service (see below), based in part on the seminal book HTML, XHTML & CSS by Elisabeth Castro, notes: "All mark-up validators suffer from an inability to see the 'big picture' on a web page. However they excel at picking up missed closing tags and other technicalities. This does not mean that the page will display as the author intended in all browsers. Even if validated, all web pages should be tested in as many different browsers as possible to ensure that the limitations of the validator are compensated for and that the page works correctly."
Using the W3C Validator
Probably the best overall way to validate your markup is to use the free W3 Validator, as noted above.
(There are other good validators out there, but the W3 Validator is the "gold standard" for HTML and CSS validation.) It can be a bit confusing to the beginner, but practice will give you a good grasp of how to fix the errors the validator finds. Olsson reminds us, "Don't forget to include a DOCTYPE declaration, so the validator knows against which standards it should check your document." Olsson and many others recommend HTML Tidy as a good (and free) program to help you tidy up sloppy or invalid code. Firefox users can download and install the HTML Validator, an add-on based on HTML Tidy, to facilitate validation from within the browser. Opera users can just right-click a page and validate it (via a link to the W3 Validator) from a menu option.
