As a developer, you should realize the importance of writing valid markup at all times. This gives your projects a solid base to work from and helps to ensure document longevity. A question that has been on my mind for some time is whether or not other developers feel the same way. When on the Internet, I spend the majority of my free time browsing sites based on the topics of Web design, Web development, usability, accessibility, and other associated topics. Being that I’m a developer I am constantly looking under the hood of other sites and checking out how things are organized. One thing I am constantly surprised to find is the lack of valid code sprawled around the developer community.
Now I’m hoping that this topic isn’t taken the wrong way. I’m not trying to preach superiority by any means and I feel that I should make that clear. Proper markup has in a way become an obsession of mine, and because of that I greatly rely on HTML Validator, an excellent extension for Firefox. For those of you who aren’t familiar with the extension, I’ll include the authors description:
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen in the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.
I always take notice to the results shown to me by the HTML Validator, and more often than not, I’m compelled to view the page source and see what exactly isn’t up to snuff on a given site. The strange thing is, the majority of sites I constantly view have simple errors that we all forget to touch up from time to time. A missing alt attribute, not properly closing an input, and other simple forgetful things that would take 4.3 seconds to fix. It’s those mishaps that really gave so much value to the HTML Validator Firefox extension for me.
I have been addicted to this extension since I first installed it. It instantly shows whether or not the markup of the current apge is valid based on Tidy. When using this extension, you don’t have to submit the page source to the W3C’s Validator. I know that checking with the Validator is nothing to whine about, but this extension does take a step out of the process.
That Little Green Circle
I don’t absolutely rely on the extension to give my markup a passing grade. I simply use it as a quick glance as I’m developing to make sure I’m staying on track. If I see anything but that Green Circle, I check the source and fix any blunders right there on the spot. It seems to save me work in the long run. When I’m ready to put a project on display, I definitely run it through the W3C Validator to double check, and use that as the final ‘go ahead’.
HTML Tidy for Safari
Recently a new plugin for Safari has been released which can basically be referred to as a port of the HTML Validator Firefox extension. It is the Safari Tidy plugin. Personally, I haven’t run into another developer that primarily uses Safari as their browser of choice, but I’m sure there are some out there. It is great that a plugin such as this was developed specifically for those who do end up testing and developing while using Safari.
But It’s My CMS!
There are situations in which a sites CMS will create anchors using a malformed URI, not include an alt attribute for an image, or produce any other piece of invalid code. There are many situations in which a CMS can wreak havoc on your markup. While not entirely the fault of the developer, perhaps a backend that is more aware of valid markup would be in order for future projects. Content Management Systems are becoming more comprehensive and aware of standards as time goes on and when written properly, can produce valid markup at all times.
An Unhealthy Obsession?
Is my markup OCD an unneeded stress I’ve put upon myself? Am I taking it too far when I wonder why a developer that has provided me inspiration has neglected to keep their markup Tidy? Personally I don’t think so — keeping your markup clean, organized, and valid is not a difficult task, especially for those leading the industry. It’s not that I look down upon any given site that has an error or two, it’s more that I get psyched when I see that Green Circle.
Comments
I wouldn’t consider it as an unhealthy obsession, actually in my mind it’s one of the best things you can do when developing a site. As you stated, creating valid markup ensures longevity and also makes it easier to test and debug.
To use the sports world as an analogy – some athletes are incredibly obsessed with fitness and nutrition. They don’t eat the same food that we do, they have a staff of 15 just to look after their diets and they spend countless hours in the gym lifting weights or doing cardio just to make sure they’re in the best shape they can be. Usually, it’s the ones who are obsessed with their personal fitness and nutrition who have the longest (and sometimes the most successful) careers. Most other professional athletes would look at this as a great practice, and instead of nay-saying they’d probably be inspired to pay more attention to their own habits.
Think of writing valid code in the same way, it’s a best practice that can only help in the long run. Does it solve everything? Of course not! Just as working out and being obsessed with fitness cannot completely prevent an athlete from getting injured, valid code will not prevent problems from ever occurring. However, it can make a huge impact on recovery time.
I started using the HTML Validator extension about two months ago. Not only am I OCD about checking my markup, but everyone else’s too. I view source more now than ever before just to see what types of warnings other people are getting.
I have found that at times the extension can deceive you. For instance my exstension says there are warnings on this page, but when you view source there is nothing listed.
Excellent article, I couldn’t agree more. There are few things more important when first starting a project than laying out your markup in a well formatted way, and keeping it valid. With my own site I’ve actually gone as far as serving my XHTML as application/xhtml+xml to browsers that accept it, to ensure that errors pop up right away in Gecko’s strict XML parser. Nothing like a big honkin’ XML parsing error to make one fix the markup in a hurry. 🙂
By the way, another (very) handy extension is the Web Developer Extenion (http://chrispederick.com/work/webdeveloper/). Been using it for a few months now, and it’s so incredibly useful. It’s literally a Swiss Army Knife of web development. I highly recommend it.
You mean I’m not the only one with that kind of OCD?!?! 🙂
Nice article. I now have another extension to feed my obsession.
@Jonathan: That’s a really interesting analogy you’ve provided — thanks. It’s true that valid code does _not_ solve everything, but it absolutely is an excellent preventative measure.
@Joey: Now that you mention it, I too had some trouble with the extension giving me some strange results. From time to time it would act as you had mentioned and show warnings/errors when there really wasn’t, and then other times it would say an invalid page was good to go. That was some time ago and I haven’t had the problem in quite some time. Perhaps you’re using an outdated version? I wish I could be more helpful on what solved my issues other than ‘it fixed itself’.
@Matei: The Web Developer extension is by far my favorite extension and I can’t thank Chris Pederick enough for putting his time and effort into developing it. I could write an entire article on the benefits of using that particular extension.
Getting back to your article, I think the main points here are all about longevity and accessibility.
If you write valid, well-structured code, you’re ensuring that with each new browser release, your code will still be 100% understood. You’re also ensuring that your content is accessible and that your content can reach the broadest possible audience – not just those who have the latest browsers with the latest support for various plug-ins, Javascripts, and other proprietary goodies.
I regularily read your articles (check every Monday, of course) and greatly enjoy them. Not only they are very valuable and I can always learn something new, but the style of writing is very clear and outstanding.
@Jonathan: You’re exactly right. You definitely see the reasoning behind proper development practices.
@Ani: Thanks for writing that, I’m glad you find the articles helpful!
[…] know I’ve spoken about the HTML validation extensions available for Firefox and other browsers, but the Web Developer Extension also provides an easy way […]