Web Standards

rdrake · **Posted:** Mon Oct 24, 2005 4:03 pm

The importance of writing standards compliant web pages.

You're probably wondering "why should I abandon Microsoft FrontPage when it makes things so much easier?" Well, it may seem easier, but in the long run it is much easier to maintain pages which are hand coded and standards compliant.

In the beginning of the web, each of the major browsers invented their own tags in order to stay ahead of the competition. This resulted in many pages looking perfectly fine in one browser while being completely distorted in another. These pages are said to be running in "quirks" mode. This was obviously a problem, so the W3C set out to create standards for the web in order to control the situation.

Web pages we create today are mostly a combination of HTML and CSS. Before CSS, web designers had to use tags like the tag in order to create different effects. Not only did this create a lot of useless code, but it also made it much harder to separate the content from the layout tags. CSS (cascading style sheets) are an excellent alternative to using the old,
depreciated tags. More on CSS later.

There are several standards which are in place.

HTML & XHTML
HTML is one of the most widely used ways of sharing information on the internet. It was one of the first methods, and still remains the most popular. Some formats (such as XHTML) have come to replace it, but they haven't succeeded. Some say XHTML will die out soon, as it is not much more useful than HTML, it just has some more strict rules to it.

After the browser wars, HTML was a mess. There were so many oprietary tags in use, and pages were barely showing up in the competitors' browsers. This was one of the first web items to be standardized, as far as web pages go. The W3C created a list of tags which it found to be useful, and cut out many of the useless tags which were created by Microsoft and Netscape.

In order to specify which HTML/XHTML standard your page follows, you will need to include a doctype declaration at the top of each page. Here are some of the most common ones:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
If a browser does not see a doctype at the beginning of the page, it will render the page in quirks mode. You can find more information on the different doctypes and their meaning, as well as the tags you can use with the particular doctype you have chosen here.
CSS
Pages were now becoming bloated. It was hard to separate the content from the layout. Something had to be done, and the solution was cascading style sheets. This allowed the content writers to write their content, without worrying about messing up the rest of the page. It also allowed the web designer to assign classes to elements and change a property once which would then change it for the rest of the pages on the site, whether it be 10 pages or 10 000.

At first, CSS was mainly for appearance, but in the second version, newer features which allowed positioning were added. This reduced the need for ugly tables and gave web designers more flexibility over their pages.

You're probably now thinking "Great, I'm going to use CSS for everything." That is not necessarily a good idea. Good use of CSS means that when your stylesheet is available, everything looks good, but even if it's missing, people can still read the content and navigate your site. Using CSS for some things is a bad idea, but it is usually good to use it.
Accessibility (Section 508)
Now every thing's perfect. Pages render correctly, and their content is separate from the rest of the layout. Wrong. Pages may render better, but some people may still not be able to view them. Those with disabilities such as poor sight and colour blindness still use the internet, but many pages weren't accessible to them. This is why section 508 was created.

Things like flickering images and missing alternate image tags make it harder for persons with disabilities to view pages. Also, using things like depreciated tags and excessive use of CSS for positioning will prevent people with older browsers from viewing your site properly.

There are many reasons why you should comply with web standards. Above and below are only a few of the many.

Proper rendering in each browser now and for years to come
People with disabilities can still view your site without problem
Your pages will be smaller and load faster
You gain experience by editing the pages by hand
Your pages look more professional
You have a sense of pride in your site knowing that you took the extra time to make it work right

There are a few tools available online which will help you ensure your pages are standards-compliant:

HTML Validator - http://validator.w3.org/
CSS Validator - http://jigsaw.w3.org/css-validator/
Accessibility Validator - http://www.contentquality.com/

I think that just about covers it. If you have any comments, questions or suggestions, just ask.

Amailer · **Posted:** Mon Oct 24, 2005 5:58 pm

Hey, nice! + Bits for this.
But if you know... could you explain to me why sometimes for websites (when I make a fresh new web page) when I do a W3C Validation check it gives me an error saying "cannot find doctype" "something at prolog document".... its really annoying....

Sometimes it gets fixed when I copy and past the code into notepad and save it... could it be the end of line causing this problem?

rdrake · **Posted:** Mon Oct 24, 2005 8:21 pm

The only reason I can think of which would cause that error is not having the doctype declaration at the very top of the page. It must be the first thing in the document, because everything else is evaluated against it. Newlines shouldn't have anything to do with it. The doctype usually goes something like:

code:

<!DOCTYPE ...>

If this doesn't solve it, then give me an example of it and I'll try to see what's wrong.

Amailer · **Posted:** Tue Oct 25, 2005 2:56 pm

Well, I edited the code using Edit-Plus (on Windows) and changed the line if code to "UNIX" and then back to "PC"... and it worked.
So it does seem like the end of line is causing the problem, but sometimes that doesn't fix it.

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members