Technical level: Basic/Beginner || Date: 28th December 2003|| Author: Nigel Peck

This article has been published on SitePoint and linked from the W3C. This article has been awarded Feedback Of The Month at SitePoint. See what others have said about this article.

Article Index

Introduction,
Hello World,
XHTML Building Blocks,
Text That Says Something,
Advanced XHTML Building Blocks,
Text That Says Something 2.
Introduction
This article is for readers who have either no prior experience of Web Design or very little. If you have dabbled with exporting HTML from Microsoft Word, or played around with FrontPage a little and want to understand what you are doing then this article is for you. I will teach you what XHTML is and how you can use it to start producing the next generation of Web pages.

If you have difficulty with any part of this article or can't get an example to work feel free to contact MIS Web Design. I'll do my best to answer you as quickly as possible.

If you want to skip this introduction and get on with it feel free. Just go to the Hello World section and get started. But please come back and read the rest of this introduction later when you have time.

Colour

I have used colour in the example XHTML throughout this article to make it easier for you to understand the code. The colour is purely there for this reason and serves no other purpose.

No Programs

I will not be showing you how to use any programs to write XHTML for you. I have a firm belief that the best way to write Web pages is to get your hands dirty and write the code yourself. I've been doing it for seven years so far and it hasn't let me down yet. Here are the main reasons I believe this.

Programs that produce HTML for you often do so badly. What I mean is that they often produce Web pages that go the long way round about doing things. When you code your pages by hand you have an intimate understanding of what you are doing and can make the actual size of the Web page file as small as possible. This reduces download times so your pages load quicker and your users are happier.

When you use a program to generate HTML for you, you do not understand how your page is built internally because it does it for you. This is not a problem as long as everything works. But what about when it doesn't? If you find that your Web page doesn't display properly in Internet Explorer 4, and many of your users use that browser, you are going to have to sort it out. This means forgetting about the program and looking at the code yourself. Do you see the problem? You've been using the program to code the page for you so when the problem occurs you haven't got the knowledge you need to fix it. And problems will occur.

The Internet is no longer limited to people with computers viewing Web sites through one or two different Web browsers. Everything has a Web browser in it these days. Mobile phones, Televisions, Personal Digital Assistants, Cars, even fridges. Blind users "view" Web sites using speech synthesis or Braille devices. There is no way you can test each page you produce in all of the possible ways it may be used. But there is a way to give you the best chance that they will work. This is achieved through producing pages using the standards laid out by the World Wide Web Consortium (W3C), the people who work on XHTML and other Internet standards. Once you have produced your pages the W3C provide a validation service to check that your page meets the standards and therefore has the best chance of being used on any device. I do not know of any HTML generation programs that produce valid code.

I hope that has persuaded you that the learning curve for XHTML is worth it. If you decide to use a program to do it then that will have a learning curve too, so you might as well take the code option and save yourself hassle in the future.

Why XHTML?

Since 1990 HTML or Hyper Text Markup Language has been the language recommended for writing Web pages in. And it has been very successful (you didn't need me to tell you that). But HTML has its problems. Without going into specifics, as it's not the subject of this article, HTML has become a mess. To sort this mess out the World Wide Web Consortium, the standards body for the Web, came up with XHTML in 1999. XHTML stands for eXtensible Hyper Text Markup Language and is written in a language called XML or eXtensible Markup Language.

As the name implies XHTML has the capability of being extended. You can use extra modules to do things with your pages that weren't possible with HTML. The long-term goal is that your Web pages will be able to be understood by computers as well as humans. If this doesn't make sense, allow me to explain.

You may be thinking that computers already understand Web pages because you use a computer to view them. This is true. But computers only understand how to display your pages, not what they mean. Imagine if computers understood what they meant, you could tell your computer to go and visit all of your local supermarket's Web sites and tell you which one is the cheapest for this weeks shopping. Your computer could visit the news sites around the world and bring back the latest headlines that relate to things you are interested in. The possibilities are endless.

Hopefully you now see why XHTML is important. I decided to write this tutorial to teach you XHTML from scratch. The main reason for this is that I couldn't find a beginners XHTML tutorial anywhere, there are plenty of HTML beginner's articles, and plenty of XHTML introductions for those who can already do HTML, but it seems logical to me that if you are starting learning Web Design now then you might as well use XHTML from the word go. So if you're still with me, go.