HTML / CSS – W3C & The Web Standards

This chapter might sound like it’s pointless but it is really important.
I’ll warn you straight away : you won’t learn how to make any super dynamic flashing effects, but you will learn about the history of the web.

Why do we use XHTML nowadays instead of HTML ? Why have we decided to separate the content (XHTML) from the style (CSS) ?
Why do we say that some sites are valid whereas others aren’t ?

And what about your site… is it valid ?

We’ll start by the basics : the web’s history. Webmasters should know a bit about the web, when it was created and its history.
It’s not only general culture, but it will also allow you to understand what follows in this chapter.

Everything started at the beginning of the 70's, during a meeting at the Canadian government. A certain William Tunnicliffe suggested separating the content of the information (the text) from the way in which it was shown. Already back then, although the Internet was reserved for a few privileged people, they had the idea of separating the content (which has now become XHTML) from the style (which is now known as CSS).

Things started to speed up in 1978, people started to meet up to create a standard language that could evolve.

In 1986, the SGML was created. This is the abbreviation of Standard Generalized Markup Language. This language was powerful but too complicated. To keep things short, the documentation had 1290 pages ! It never managed to attract the public because of its complexity and never had any major glory

In 1991, Tim Berners-Lee invented the World Wide Web (abbreviated to WWW). To create the first web pages, Tim Berners-Lee created the HTML language which was slightly based on SGML (so it did have a use after all ).
HTML (abbreviation of HyperText Markup Language is distributed for free (thanks Tim !)

2 years later, one of the first free browsers was created : it was called Mozaic and it worked on Mac as well as PC.
Between 1993 and 1994, the number of websites grew from 500 to 10 000. The web already seemed to have a great future.

Things started to gather pace in Europe. The web started to boom, and there wasn’t really an organisation in place to monitor its evolution. Somebody needed to make sure that things weren’t being done haphazardly, people needed to work together to ensure a good evolution of the web (and of HTML !).

In 1994, Tim Berners-Lee, the one who created the Web, created the W3C (abbreviation of World Wide Web Consortium. He became its director.
The W3C is an organisation with the mission of monitoring the evolution of the web : they needed to stop certain large companies from trying to slow down the evolution of the Web for commercial reasons. The W3C also had the task of designing new versions of HTML, so that the Web could evolve.

In 2003 about 450 people worked for the W3C.

As you can see, right through its history the Web has been carefully developed, to stop it from becoming a toy for large businesses.
Still today (more now than ever), the W3C has the task of ensuring the correct development of the Web. We will see what it did with the HTML language, and why nowadays the standards are XHTML and CSS.

As I said above, right from the start of the Web, Tim Berners-Lee created the first version of HTML.
In effect, like all programming languages, HTML has known several versions :

HTML 1.0 : the very first version of HTML created by Tim Berners-Lee in 1991.

HTML 2.0 : the second version of HTML appeared in 1994 and ended in 1996 with the appearance of HTML 3.0. This version set the base of the following versions of HTML. The rules and specifications of this version were set by the W3C (whereas HTML 1.0 was created by 1 person).

HTML 3.0 : having appeared in 1996, this new version of HTML added several possibilities to the language such as tables, applets, scripts, the positioning of text around images etc…

HTML 4.0 : appeared for the first time in 1998, and offers the use of frames (which separate web pages into several areas), complicated tables, improvements in forms etc… But most of all, this version added the use of cascading style sheets, the famous CSS !

XHTML 1.0 : at the beginning of 2000, the W3C decided to clean up the large mess that was HTML. In effect, during its evolution, HTML tags had been invented by Netscape and Internet Explorer (by Microsoft). Some tags worked on one browser but not on another.
The W3C decided to stop the development of HTML and to create a new language. XHTML (EXtensible HyperText Markup Language) thereafter became the standard : this language had to work in the same way on all browsers, and no right to invent new tags so long as the W3C hasn’t authorised it !
Really, there aren’t that many differences compared to HTML, but the language is Strict : you’re not allowed to make as many errors as in HTML. That doesn’t mean however that it is more difficult to use, you just have to get used to it.

In the web site creation lessons I’ve written, I’ve only talked about XHTML because that’s the language that’s used today. You’ve therefore learnt the correct methods straight away, which will make your sites a lot easier to create. Those who learnt HTML still have some bad habits.

So that’s the future of the web, and it allows us to make sites that are visible on PDAs, telephones and all sorts of other portable devices.

Can you imagine if there were 35 different audio formats available ? Your CD player could read some of them but not others… Well, it was the same with XHTML : everybody came together and agreed on the way a web page should work. So in the end everybody wins : you (the webmaster) and them (the visitors).
Therefore creating a standard ensures that everybody speaks and understands the same language.

The history of CSS started in 1996. Everything comes back to the idea of William Tunnicliffe (who I talked about earlier) : he wanted to separate the content from the way a page is displayed. This adds several advantages : it’s easier to change the appearance of a site, the pages load faster, we can propose several designs easily etc…

CSS 1 : from 1996 the first version of CSS was usable. This language set the base of the language that allows us to present a web page, such as colours, margins, fonts etc…CSS 2 : created in 1999, this new version of CSS added several interesting and useful options. We could thereafter use absolute positioning, the pseudo-formats :before and :after etc…

CSS2 has existed since 1999, and yet some browsers (Internet Explorer without wanting to give any names away) still have problems using it correctly. Digesting everything in CSS is not the easiest thing, and there are always bugs. The problem is that it’s us, the webmasters, who are paying the price because we constantly have to check for differences between browsers.

However, as you know, creating an XHTML page and CSS is quite simple. The only tricky thing (even for experienced webmasters) is creating a website that works correctly on all the recent browsers (Firefox, Safari, Google Chrome, Opera) AND on Internet Explorer which is an individual case.

For the last part of this chapter, we’ll stop talking and do a bit of work.
What I’ve told you up to now was to teach you the history of the web, but also to make you more aware of what will follow…

What is validation ?
There are sites that are valid and others that aren’t ?

Remember : the W3C put in place the standards. You must respect them so that all the sites speak the same language.

On its site, the W3C  offers a tool called a Validator.
The validator is a kind of program that analyses your source code and tells you if it is correct or if there are errors that need correcting.

There are 2 different validators :

An (x)HTML validatorA CSS validator

We will learn how to use both of them by starting with the XHTML validator.
Before we start, I should warn you, the validator will probably show you a few errors. Don’t worry, it’s normal the first time 
However, the CSS validator shouldn’t show too many errors; it’s harder to make errors in CSS than in XHTML.

Let’s start by the hardest bit first 

First of all, bookmark this page, it’s the XHTML validator : http://validator.w3.org.
Those who downloaded the Web Developer plugin for Firefox can automatically validate the code with a special menu. There is also a great plugin for Firefox called HTML Validator.

The page you can now see is very simple. There are 2 ways of validating :

Either you validate a page that is already on the web. In this case just enter the address of the page (for example : http://www.mysite.com/page.html).Or you haven’t yet put your site on the web (the pages are therefore still on your hard drive). You can therefore send the page directly to the validator to be analysed.

In both cases, the result will be the same, there’s no difference.

If everything is alright (don’t hope too much  ), you will get the following message :

The site will then allow you to put this icon on your site to show that it respects the XHTML standards and that you respect the rules.
It is not necessary though. If you don’t like it you don’t have to use it 

Of course, if your site has several pages, you’ll have to test them all.

My page isn’t valid, I’m never going to manage, there are loads of errors 

First thing : just because your site displays itself correctly doesn’t mean that it is valid.
A web page can look wonderful and yet still be full of errors.

What’s the point in correcting it then ?

As I’ve said right through this chapter : if your site is in XHTML 1.0, it needs to be coded correctly so that everyone can understand it. Browsers try not to show errors so that the visitor isn’t disturbed, but nothing is stopping the browsers from showing things badly !

What’s more, a page that is correctly coded has a better chance of appearing at the top of Google’s results, which will get you more visitors !

I’m not going to show you all the possible errors, the list would be too long. I will however show you some of the common mistakes. You’ll probably notice some of the errors that you’ve made as well so you’ll know how to fix them.

First of all, this might seem to be apparent because I said it at the beginning, but I must remind you : the names of your attributes and tags must be written in lowercase. The value of an attribute can however include uppercase letters :

Solo tags, like the change line br and the image tag img must end with a slash (/) :

The space between the br and the slash isn’t necessary but the W3C do recommend putting the space in.

All your text must be placed between paragraph tags. You are forbidden from placing text directly between the tags without putting

tags around the text. This is also the case with the return line tag (
) and images () : these tags must be in the

tags !
This is an extremely common error with beginners. Here’s an example of what you shouldn’t do :

Code : HTML

Here is some text that's correctly placed in a paragraph.
br tags must be placed inside paragraphs, don't forget it.

This text is placed outside of a paragraph. It's forbidden.
br tags are also forbidden outside paragraphs as well as images.

This text is once again inside a paragraph, everything is good.
Don't forget that images must also be inside paragraphs.