How to Fix W3C Errors in Website Design (Part 1)

Posted on Wednesday 19th May 2010 by Pete Campbell 1 Comment

For any aspiring Web Designer, one essential ingredient in ensuring that their website coding skills are to an effective standard, is to seek that it appears as W3C Valid.

In a similar fashion to how correct writing skills must conform to correct spelling and grammar, World Wide Web Consortium (W3C) Logo coding languages such as HTML, CSS and XML each have their own set of standards and rules that must be followed to work as intended in a website design.

The World Wide Web Consortium (W3C) sets out to maintain and encourage these rules to be followed, and offer a free validation service that allows Web Designers to see if their conform to current W3C standards.

Although, achieving W3C Validation isn’t as simple as it sounds.  For many years it has been causing headaches, stress and twitches among Web Designers so that they can ultimately take the pride in knowing that they can code to W3C Standards.

Over the next two weeks, I’ll be taking a look at common W3C Errors when trying to achieve XHTML 1.0 validation and how to fix them. For reference, XHTML 1.0 is one of the most widely used markup languages as of writing.

Error #1 – Have you closed every HTML Tag?

One of the most likely W3C errors is caused by forgetting to close a HTML correctly on the right line of code. Regular offenders include Paragraph tags, DIV tags and the old favourite, list elements.

<div id="w3c-valid">
  <p>Seeking to Achieve W3C Validation?</p>
    <ul>
      <li>Symptoms include Headaches</li>
    </ul>
</div>

To help visualise if you’ve made this mistake, try ‘Source Formatting’ your code in Adobe Dreamweaver and you’ll soon be able to identify and single out any lines of code that appear out of place or unfinished. If you’re unsure on how to do this, read our tutorial.

Error #2 – Have you used Special Characters correctly?

If you are considering using special characters such as Ampersands (&), Quotes () or Hashes (#) throughout your websites content, ensure that they are implemented using the correct HTML Symbol Code. If you’re stuck, try referring to our handy Special Character Guide, including a printable wall-chart.

<p>Remember to write &amp; in your HTML coding when using an Ampersand!</p>

Be extra careful when using Special Characters for WordPress-based Article Titles. They will not always automatically translate to the correct HTML coding, which could of course result in a W3C error without you even realising it.

Error #3 – Does every Image contain ALT text?

Using the alternative description ‘ALT’ tag on Images is an important aspect of considerate website usability. It allows screen readers and search engines to understand image content, and for those with disability considerations such as blindness, the description can be vocalised via text-to-speech software.

<img width="150" height="100" alt="World Wide Web Consortium (W3C) Logo" src="http://www.crearedesign.co.uk/blog/wp-content/uploads/2010/05/w3c-logo.jpg" />

On occasion, it’s easy to forget about including ALT text, so ensure you write an appropriate description for every single image, and you’ll be another step closer to W3C Validation.

Error #4 – Have you defined the websites Markup Language?

In order for Web Browsers such as Internet Explorer, Mozilla Firefox or Google Chrome to understand how to process and render a websites coding correctly, it must first be instructed which HTML language the specific website has been coded in.

For XHTML 1.0, simply stick in the following line of code above the <HTML> tag on every page of your website:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If this, or a similar definition isn’t in place, it’s likely your website won’t load at all in some web browsers, and the W3C Validator will be unable to grade it.

Further Reading

Next time, I will be looking at how to tackle further common W3C errors such as ensuring Structural Tags are implemented in the correct order, and defining the many variations between HTML 4.0 and XHTML 1.0. In the meantime, why not watch our recent video series on sIFR Font Replacement.

Pete Campbell

Nothing is known about Pete Campbell at this time.
This entry was posted in Tips For Web Designers and tagged , , . Bookmark the permalink.

One Response to How to Fix W3C Errors in Website Design (Part 1)

  1. Ryan says:
    May 20, 2010 at 1:49 pm

    Nice article, helped me a lot. W3C errors are the bain of my life! many thanks for the help.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>