Julie Smyth : 2004
Have you noticed the little image to the left? Have you seen this image on any websites out there in cyber space? Have you wondered what all the fuss was about? Well, because a few people have been asking me questions about this particular image I thought I would write a feature article on XHTML 1.0, website validation and the W3C.
Basically, XHTML 1.0 is a "standard" way of coding which has been set by the W3C (World Wide Web Consortium) in the hope that it will make the web accessible by all. Thats a nice thought huh? In reality most programmers don't stick to the standard, I know I am guilty of this myself, because there is usually too much work and too little time. However, the idea behind XHTML is simple, it is a very very very strict way of coding and as a result system makers don't have to accommodate for bad markup. As we see now that even fridges are beginning to have access to the internet, this is something all programmers (including myself arrgghh!) will need to incorporate into their coding, if not now, very soon. Another reason for thinking about this now is that future browsers may stop supporting deprecated code and this could lead you into trouble with your existing websites.
Lets take a look at the differences in code between HTML 4.0 and XHTML 1.0, i.e. the old standard versus the latest standard. The first line of code in any webpage you create should be the DOCTYPE, see the example for XHTML below.
<"!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
It is the DOCTYPE which tells the browser how to interpret your code, without it some browsers may render your code in an erratic manner. Notice it says "transitional" at the end of my example, there are two other types "strict" and "frameset". If you use the "strict" specification it means that all your 'STYLE' and 'PRESENTATIONAL' commands are taken out of the HTML page and put into a stylesheet (or as style commands in your page header). If you use "transitional" it means that your 'STYLE' and 'PRESENTATIONAL' commands can be left inside the HTML page. You'll find this version a lot easier if you are learning about Stylesheets. As for "frameset", eh it is best to avoid frames, but that is another tutorial altogether.
The second thing you will need to code is the HTML tag, as you need to define the XML namespace your document uses, this is just a definition of which tags you're going to use. So if you change your HTML tag to read like this example ...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > ... thats all you need do.
But the main thing you need to know is that the differences between HTML 4.0 and XHTML 1.0 are few. There are no new tags to learn, or attributes for that matter. The difference lies in the fact that the coding is stricter and that it ties in heavily with CSS. So, if you have been avoiding CSS, now is the time to learn it. The good news is that a webpage written entirely in XHTML is still rendered properly in all the current browsers, so there isn't alot to lose.
So ... just what are the differences ...
| * |
Tags and attributes are all to be in lower case. This is because XML is case sensitive.
|
| * |
All tags must be closed, e.g. <br> will now be either <br /> or <br></br>. It is recommended to use the former and leave a space between the tag and the slash so that older browsers still render correctly.
|
| * |
Attribute values must be surrounded by quotes, e.g. hspace=5 becomes hspace="5".
|
| * |
Tags must be in their correct position. This has always been the case but programmers will be programmers. Just follow the simple rule that the FIRST tag you open must be the LAST one you close, e.g. <table><tr><td></td></tr></table>
|
| * |
One word attributes like "nowrap" can't be used by themselves anymore. Now they have to appear as an attribute to themselves, e.g. <td nowrap="nowrap">text</td>
|
| * |
No white space allowed between tags, e.g. <tr> <td> has to be <tr><td>.
|
| * |
The "name" attribute has been deprecated and for internal links instead use the "id" attribute, e.g. <a href="#tests"> <p id="tests"></p>
|
| * |
If you are using the "img" tag there must be something in the "alt" attribute. As it is a good idea to use the "alt" attribute anyway because it is search engine friendly, it is now mandatory, even if you leave it blank it must appear, e.g.
<img src="piccy.png" alt=" " /> |
| * |
Ampersands can't be used in code anymore, instead use the entity value &. The ampersand will display as an ampersand and it won't interfere with other code like PHP which uses ampersands to carry variables.
|
A total of nine differences, not too bad really. The next step, after you have edited your existing website code, is to run your webpage through the validator at the W3C website. If you have missed an attribute or a tag closure somewhere the validator will tell you the line and character number to amend. You know you've succeeded when you see "THIS IS VALID XHTML 1.0" and you are presented with that nice little image from the first paragraph to place on your website. Its kind of like wearing a Scout merit badge, you feel left out if everyone has one but you.
Hopefully, if all goes according to plan, the next feature article will be on CSS and validation. See you next month. But please, click on my merit badge and see if this webpage is W3C validated before you go.
Cyber Aspect™ © Copyright 1999-2008 website design by fx digital All rights reserved Contacts | Terms of Use | Privacy Policy