Why Having Valid HTML and CSS is Important

Many web designers and or developers tend to forget how important it is to keep their code valid and organized when developing or creating website. They generally ignore code that may be in error, or code they used as a quick shortcut to get around browser limitations or faults. There are many issues or problems that arise due to the cause of not validating your code and thus, we discuss several reasons to why having valid HTML and CSS is important.

Browser Guess Work

When you have invalid code such as closing certain HTML tags in the wrong order, leaving many open, using HTML tags invalidly, or using CSS elements or properties incorrectly, browsers tend to try to patch your work for you in order to eliminate as much rendering errors as possible. However, the problem with this is, is that every browser has its own way of trying to do the patch work, leaving your website looking and functioning different from browser-to-browser, or platform-to-platform. Therefore, always make sure your code is validated in order to eliminate many errors that you may have missed, and those that the browsers may have tried to move around to fix for you.

Bad Coding Leads to Bad Habits

As the text above describes, we all generally tend to have a bad development or coding habit that we do not know of, and oppositely think otherwise. This is usually the cause of bad coding that we never caught earlier in our coding stages due to not going over our work, or not validating our code. Validation tools are generally helpful as they help appoint errors we may not have seen otherwise, and to eliminate this validation process hinders our development style for the future. Therefore, validating your code increases on good coding habits for your future indirectly whether knowingly or not.

Validation Leads to Professionalism

If you are a freelancer or work for a design or development firm, you know that professionalism is key to your success. As a part of professionalism, making sure your code validates is very important as it somewhat provides a general idea or image about you and the way you work.

For example, if I am making a batch of cookies, analysts will look at the process of how I make them, how efficient I am, and how clean I work. If I am a very messy person when making these cookies, I will definitely get points knocked off in the eyes of the analyst. Similarly, code validation should be a standard for you to express that you care about your work, and that you are a well organized coder or developer who cares whether what he or she develops is proper or not.

Invalid Code Frustrations

We sometimes become caught up with some HTML and CSS debugging work where we spend hours in on end trying to fix certain bugs we just absolutely cannot find. In many cases, these hours of debugging spent are caused by invalid code that you may have stuck in that you thought was right. Therefore, instead of spending five minutes of your time knowing what the problem is and fixing it, you end up spending hours trying to find the problem to fix it. Thus, always spend the few minutes it takes you to assure your code is valid, as the time you save, and the knowledge you gain, is priceless.

To conclude, code validation should definitely be a standard or routine habit for you as the benefits are absolutely enormous. Think of it as a routine doctor’s checkup, it is better to find out what you have in your system that is being developed rather than being shocked about something you may have had years down the line.


7 Responses »

  1. Great Read. I always validate my code as it just makes things so much easier to work with, and as you stated, it keeps a professional image to your customers. :P

  2. You do realize that your XHTML syntax website is delivered as text/html? Well at least you’re not delivering it as XHTML-Strict with the target=”_blank” attributes around.

  3. Reasons to have a valid HTML and CSS are enough, but does also help in SEO?

  4. Remember back in the day when we had to hide all our Javascript code with HTML comments so that browsers which didn’t support Javascript wouldn’t attempt to display it? If you employ the same technique now it hides it from validator, so & symbols used in Javascript won’t cause validation errors.
    As for invalid CSS (which this page also has – as does my own website) I personally think that as long as you are aware of the syntax rules of CSS, some technically invalid hacks don’t hurt much. A technique I’ve adopted recently is to pull out all CSS that doesn’t validate into a separate stylesheet, ensure the page displays in a satisfactory manner without that stylesheet included, then include the “naughty” stylesheet again so browsers which are able to support it can make the page a little prettier. If only the most popular modern browsers actually supported the standards, maybe we wouldn’t have to use invalid CSS hacks. But they don’t, so we do.

  5. Nice reminder on developing good code. Web designers work hard (try to) to maintain good web standards. Unfortunately events beyond our control, incredible short deadlines and scope creep happens. Shortcuts are implemented and then becomes the daily norm. Only then after the abruptly last minute project we go back and correct/fine-tune our code. Important to have the finish prototype/comps first and sign off by the client before coding because coding on the fly creates sloppiness. BTW: good code is important in email delivery and SEO.

Leave a Comment

Category Selection

About Us

Boxie Designer is a blog on web design and development tips, tutorials, how-to's, and anything else under the web design and development genre. In order to keep our readers informed, we also have some Editor Picks in where the Editor selects some great outside articles on the topic.

Our Writers

The folks behind Boxie Designer are skilled designers and developers like yourself, with years of experience in the field. Their goal is to help share some tips and secrets they learned along the way.