Introduction to Building Valid W3C Coded & Accessible Web Pages
It's not difficult to get the basics of web design right from the start if you follow some key rules. If you want to design a site which can be indexed by the search engines, be accessible to the maximum number of people, and generate enough traffic for your business then your priorities in design should be

This, first in a series of articles aimed at beginners and sites migrating to XHTML 1.0 or seeking to improve accessibility, will concentrate on the number one priority in design, the code. As easy as it is to get it right, it's as easy if not easier to get it wrong. The internet is full of code snippets, hacks and scripts which aren't written in proper code and which can damage your sites accessibility and search engine ranking if you use them unsanitized.

FrontPage & DreamWeaver
The programs you use to help design your site, such as FrontPage or DreamWeaver, may be out of date and not comply with current W3C coding standards i.e. they use deprecated tags or are simply incorrect. If you rely on them exclusively then you are in danger of designing a site which contains obstacles to both the computer and human reader. The same can be said for some text books.

If you have an understanding of how the code is put together and structured then you can correct these errors and ensure your site is optimised.

Basic Structure
If you landed on this page from our design shop then you will have read how I likened a web page to a person, i.e. every one has a head and a body. Let me now add to that description as, if you haven't noticed, there are many creatures on earth with heads and bodies. We need a way to define the species so we can distinguish between them and understand what we're looking at.

Remember a website is first read by computers, then displayed in the browser, then read by us. The easier we make it for the computer to do so will make our site more accessible to both people and, if not more importantly, the search engine robots like Google and Yahoo Search. There is key information we should pass to the computer to tell it what we are and how to display the page. Continuing with our analogy comparing a web page to a person, the information we need to send can be summarised as follows

Without at this stage delving into detailed explanations and the whytofor's, this format can be translated into a basic web page structure as follows

Although a web page will work and display to you without defining all of these, the object of having a web site is to generate traffic and convert that traffic into sales or return users. This is why we follow this defined structure. In the succeeding articles we will look at each one of these elements in turn, but before we do so lets generate a valid web page using the structure we defined above.

A Valid Web Page
In the box below type your name over the row of dots and click view to launch a web page which complies with valid XHTML 1.0 coding conventions (well almost, you will have to read the succeeding articles for the final code).

Next Article
In the next article we will look at the "I am a person" section of the web page and discuss using lowercase letters, tags and containers. Until then...........

Mark O'Connor 11th May, 2006

Page 1 | 2 | 3 | 4 | 5 | 6