Its pretty straight forward to generate a simple web page, there are several software tools available that will generate the mark up code for you. However, even using these tools, it is easy to misuse tags and not conform to the XHTML standards. If you were unfortunate enough to follow the previous link, you may well be thinking,

What does it all mean, my web page looks fine so does compliance really matter?

This is a valid point, however compliance is widely regarded to be important for a number of reasons. These are pretty well documented around the web so I ll just highlight a couple of the reasons that I think are most important.

Firstly a compliant web page should be assured of displaying fairly consistently across all major browsers, both now and in the future. Unfortunately some browsers are more compliant than others, internet explorer still demands some extra attention but it is much improved since the days of IE6. The newer browsers which have come onto the market, such as Firefox and Chrome, generally display compliant pages very well. Secondly I think that compliance is important as it makes the content more accessible to machine readers. For example the readers used by search engines will be able to read and index the page content easier, which will help increase traffic to the site. This theory has actually been tested and there is some evidence to back up the claims that Google prefers valid HTML and CSS.

Keep it clean

The first step to compliance is to separate the HTML mark-up from the presentation using a CSS (Cascading Style Sheet) document. This helps ensure that the web page is short and the content is easy to find. Apparently search engines are busy guys and they just don t have the time to be reading all that content on your site. So they only read up to a certain number of characters, if your important content is pushed too far down the document then there is a rick that it will never get indexed.

I ve gone for a fairly straight forward layout on the recipe stash site, with a fixed width page of 960 pixels to target resolution widths of 1024 and above. The header, footer and main content are all in a single column. This layout can be created in CSS without too much trouble. I ve tried to use the HTML tags as they were intended originally, for example the menus are tagged as an unordered list of elements, then styled to display horizontally.

There is an unfortunate limitation with HTML, it does not support curved corners. So I ve used to Nifty Corners to create the curved effect on the top navigation menu and latest recipes section:

Nifty Corners is a JavaScript based tool which adds HTML and CSS to the page when it is loaded to create the effect of curved corners. The other option I considered to create the curved corners was to cut out images of the corners themselves and position them in the corners of the HTML elements. However I decided to use Nifty corners for a number of reasons:

• No images are required
• The generated HTML mark-up is compliant
• The implementation is fast just one line of JavaScript to call!
• It degrades gracefully (If JavaScript is not available then it does nothing)

Exceptions to the rule

I mentioned earlier that internet explorer interprets style sheets differently to other browsers. This is so pronounced for version six that a completely different style sheet would be needed to create the same visual layout. I ve decided that this would take up too much of my time and have instead used the universal ie6 style sheet, along with an upgrade message for anyone that is using IE6.

I m currently running on Windows Vista and it is pretty tricky to test for all versions of internet explorer. There are two main methods that can be used to test, either install a virtual machine running Windows XP with IE6 installed natively or use the IETester program. I ve gone for the IETester program, mainly because it is quicker to install and doesn t take up a huge chunk of my hard drive. I ve tried it out and it displays the basically styled page I would expect to see in IE6 mode:

The deficiencies of Internet Explorer versions seven and eight are less pronounced and I only needed to modify a couple of elements to give the same appearance to the web page:

• Added fixed widths to the main div elements so margins are applied
• Extra div element wrapper on the so the margin is applied
• Add fixed widths to the navigation menu elements to fix nifty corners in ie7

Validating the page

It would be difficult to judge when the mark up and styling of a web page is actually valid, fortunately there are many tools freely available on the web to help. During development I generally use the HTML validator Firefox extension. This provides a little icon in the bottom right corner of the web browser that indicates whether the current page is valid or not. Clicking the icon brings up a list of validation errors for the page. I like this tool as it is quick to browse through a site and check the validation on each page.

I ve also included links to the World Wide Web Consortiums XHTML and CSS validation services in the page footer. This will submit the current page to their online validation tools and display a report with suggestions for any problems that are found.

Well that s just about all I ve got on compliance, however if you re after a more hard line message then you can check this out!