Line25

10 Common Validation Errors and How To Fix Them

Read the full post

Designers spend hours carefully crafting every little detail in the design of their website, but the quality of their coding often comes up short. For proof, just look at the sites showcased on CSS galleries, 90% will have validation errors – Most of which are easy and simple fixes. Let’s look at some of the most common errors that appear time and time again, and how to correct them to really finish off your sites with high quality code.

Why validate?

Successful validation message

If it looks OK in the browser, why bother validating? is a common response to validation. Remember that a website isn’t all about how it looks. A HTML page is made to present data, not visual graphics, so this data should be written correctly to ensure it’s readable by a wide spectrum of people who use the web. These people might not be browsing the same as you, instead of seeing the visual website you’ve designed in a browser, they might be hearing the site through a screen reader.

An error free HTML page is much more likely to be rendered correctly by a range of browsers, and maintain compatibility with future versions. Not to mention the search engine bots for all you SEO people – You wouldn’t want to put obstacles in their way, a clean and valid page is going to be much easier for the bots to read and scan.

There’s also the aspect of professionalism. I see invalid HTML a little like spelling mistakes, although the client probably won’t see a mistake in your code, the idea is still the same. You wouldn’t want to supply a design full of typos or spelling errors, so you shouldn’t really settle for a HTML page full of little validation issues.

Common validation errors

Here’s a bunch of validation errors that were picked out from sites showcased on the first page of a well known CSS gallery. Many of the sites looked great, but as you can see, the quality of code just doesn’t match the quality of the design. The thing is, all of these errors can be easily fixed in minutes.

No Doctype at all

No document type declaration; will parse without validation

The worst thing you could do validation wise is to forget a Doctype altogether! No Doctype means browsers will have to guess what language your page is written in. To fix this error and all the subsequent issues, add a HTML or XHTML doctype to your page.

Forgetting to close an element

End tag for p omitted, but OMITTAG NO was specified

If you’ve opened a tag somewhere in your HTML document, you must remember to close it in the appropriate place. Forgetting to do so won’t just invalidate your HTML, it might also be the cause of some serious layout problems. The warning for this in the W3C validator is the cryptic message end tag for “p” omitted, but OMITTAG NO was specified – Which basically means Dude, you forget to close that paragraph tag

Missing / on self closing elements

End tag for img omitted, but OMITTAG NO was specified

Most HTML elements have a separate closing tag, eg: </div>, but other elements like input, img and meta are self closing, this means they have a trailing slash before their closing bracket. Forgetting this is just the same as forgetting a closing tag altogether.

Forgetting to convert special characters

Character & is the first character of a delimiter but occurred as data

The ampersand is probably the most popular offender here, along with quotation marks that have been pasted in from Word. Always remember to check through your body copy and convert any & signs to the HTML entity &amp;, and all other special characters to their appropriate entity symbol.

Unencoded characters in URLs

Reference to entity linkid for which no system identifier could be generated

Following on from the last point, special characters, particularly the ampersand should also be converted to entities when they appear in URLs. Links to sites built in PHP are likely to include variables in their links using the & character, so write these in your HTML using the &amp; entity.

Block elements inside inline elements

Document type does not allow element p here

A fundamental rule of HTML is that block elements should never go inside inline elements. A popular example is an anchor inside a header:
<a href="#"><h3>bananas</h3></a>
The <h3> is a block element, so it should wrap the anchor (an inline element) like so:
<h3><a href="#">bananas</a></h3>.

No ALT attribute added to images

Required attribute alt not specified

Every image inserted into your HTML document should have an ALT attribute to describe its contents. If the image is for presentation purposes only the ALT attribute should still exist but may be left empty, eg: alt="". Otherwise a clear description of the image contents should be provided.

Using attributes like “width” and “height”

There is no attribute width

This is probably a side effect of using a WYSIWYG editor which tend to insert HTML that shouldn’t really be there. width and height attributes are perfectly fine in Transitional Doctypes, but if you’re aiming for perfection with a Strict Doctype you should know that presentational styling should be saved for the CSS stylesheet.

Starting a class or ID with a number

Value of attribute ID invalid

Class, ID or name attributes can’t begin with a number. They can include numbers, just not at the start of the word.

What about CSS validation?

Invalid CSS message

Unlike HTML, CSS is used just to display the visual aspect of a web page, therefore the statement “If it looks good in the browser, why bother validating?” stands to a certain degree. An invalid CSS document isn’t going to have as much affect as an invalid HTML document, but you should run a validation check just to make sure you haven’t made any typos or mistakes in your code. If you’ve used any fancy CSS3 properties, these will invalidate your document as they’re not yet part of the spec, as long as you know they’re correct they can be ignored.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

31 Comments

  1. always points to remember… sometimes I dont think I spend enuf time validating… cheers chris

  2. Hedaru says:

    It's a typical problem for me. Thanks for remind me! <i>I don't need to validate CSS anymore.</i>

  3. Nils Geylen says:

    Good reminder to validate, not just for finding errors for the sake of it, but because as you point out: it's a technical issue, not an appearance one.

    However, concerning the trailing slash, doesn't that apply to XHTML only? Or as the validator says itself:

    <blockquote>[...] even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML</blockquote>

    • That's a good point. If you forget the closing slash in XHTML it isn't valid. But as I remember using the closing slash and skipping it altogether are both valid options in HTML4 or HTML5.

  4. Jebin says:

    Chris,
    Why big "WebDesign" blog like smashingmag is not a valid one?

    all they care is about the money they r making.is it?

  5. Mike Badgley says:

    Chris, I disagree with your comment on the width and height attributes. These are completely valid in all doctypes and I believe a good idea to include. The reason you were getting an error is that according to your HTML snippet/screenshot, you were attempting to add these attributes to an element (<input type="image">) that does not support them.

    • Was just about to point this out.

      Width and height attributes are both harmless and useful. SPECIALLY on img tags.

      Actually, forget pretty much about all other tags. img are the ones that not only may find it useful, they SHOULD ALWAS have them.

    • Mike Tansey says:

      I agree. I was going to point this out too. width and height attributes on images greatly increases the paint speed by the browser, because it doesn't need to wait to load the image to find out how much space to allocate it in the layout. The page will load MUCH faster and will also "build" nicer too with w and h attributes.

      note: inline style="width:x;height:x" will not do. Needs to be in the HTML attribute, as styles are processed seperately when painting the page.

  6. hackproject says:

    Hey Chris,

    Nice article thanks for posting it! Always worth going through and validating a site after its been coded – like you say – if you skip this final step, you could be 'discriminating' against certain browsers that won't parse your code correctly.

  7. sanji says:

    chris, nice post! I have a question, I encounter this kind of error in W3C (Encountered: "D" (68), after : "<!" ) how do you fix this? thanks man!

  8. Upen says:

    I was looking for this.

    Thanks!

  9. Ric says:

    Re: forgetting to close an element.

    Is there a tool out there which will quickly find an unclosed element?

  10. The 16i Team says:

    Excellent article.

    It is the simple things that often get missed. Always good to drop back to the trusty validator in times of strife. And it should be a rule of thumb at every waypoint in a web project!

    Cheers for the tips Chris

  11. Joefrey says:

    Great tips Chris, using HTMLTidy often times displays no error but when I tried to check them on W3C validator errors shows up.

  12. I knew about all of these except the header one, thanks for the tip Chris.

  13. Intelisystem says:

    Hi,
    i found your blog through googling. your blog gives to us very good knowledge about web design. and this blog provide knowledge about web development,
    this blog are very help full for web industries.

    Thank You,

  14. Rommel says:

    Designing a website is proven tiring and stressful and because of then we often make mistakes on our codes with knowing it. That is why validation is vital in website coding.

  15. 3LpC says:

    "Strict" validation is not everything – though it's a safety net. In case of "width and height", I'd always go with them (as long as they value the real size of an image).

    This way the browser doesn't have to calculate the dimensions internaly which will increase the page load time.

    It's only a micro-optimization but if you're displaying an image gallery it might already be worth the effort.

    Good post, btw :)

  16. Kyle Racki says:

    Good reminders here.

    Just thought I'd point out that validation has nothing to do with SEO – as I once proved to a client who's technical adviser insisted was the case.

    We googled the keyword they were trying to rank for and the top result had literally hundreds of HTML errors.

    I think your point about it just being the professional thing to do is the most valid (no pun intended).

  17. Dreb says:

    Quite informative. Lately, i've got an error but not in my markup, it's the feed. I thought this is all about the feed thing.

  18. Tim says:

    I agree.Always good to drop back to the trusty validator in times of strife.

  19. Travis says:

    An attribute that I use often is the target="_blank" for links. When I validate it in XHTML 1.0 Strict, however, it causes an error.

    Is there a way to fix this? Seeing as how you can't style it in CSS I don't see how it can be fixed.

  20. Marc Forsythe says:

    Hello,
    I have an idea for a website that I would like to make which I don't want to disclose here, but I just have some simple experience with Joomla and the like. But I think this idea would would be quite successful if it's done right, It would require some skill and it needs elements similar to Chatroulette added and I don't have the programming skill, so I want someone to collaborate my ideas with and make a website with and if it hits it big you can of course keep half the profit or more (I have a very good idea on how to monetize it). I'm only 15, but I have a passion or websites and business. I know I can't agree to any legally binding contracts but I can be trusted and I hope the person I go in on this project with can as well. I don't have any connections with people with experience in this, so that's why I'm asking here. So any interest, please email me burntguts@yahoo.com

    Regards,
    Mark

  21. techwench says:

    i was looking for this thanks!!!
    for such post
    …..

  22. Tom Hare says:

    @Travis I often use a jQuery function for external links to avoid the target="_blank" problem. Add the rel="external" definition to any relevant links and include the following on the page.

    $("a.external").click(function () { window.open($(this).attr("href")); return false; });

    Works nicely. The only drawback is that non-javascript users won't get a new window but this is generally a low percentage of visitors so I believe it a risk worth taking. Hope this helps.

  23. Tom Hare says:

    @Travis Sorry meant add "external" to the class property not rel.

  24. Travis says:

    @Tom Thank you for the help, works like a charm.

  25. Nice post. Cant think of any more common errors to throw in the mix. Thumbs up from me

  26. Prakash says:

    Excellent post which helps us to fix the errors on validation. It really sounds great man. will follow these tips in coming days. Thanks for sharing this sweet stuff. Congrats.

  27. It is really interesting, but hoe we find this errors?

Comments are now closed