A Quick Overview of XML and CSS

This is something I wrote several years ago, for CSc 473. I am putting back a link to it, by popular demand, in 221.

Why Change? What's Broke?

HTML was intended as a markup language, meaning that we can specify the general characteristics of parts of a document, such as headings, paragraphs, lists, tables, etc. It was never intended as a page layout language.

Over the years, clever people have devised approximately a zillion ways to trick HTML into acting like a page layout language. Tables were used, not for tabular data, but to structure a page. (Yes, I'm guilty. I have a lot of rework to do on this site.) Others used a 1x1 pixel transparent GIF to insert between lines to get the extra spacing that HTML does not provide a mechanism to get.

This is a dead end. The trickiness is about to collapse under its own weight, and changes on the horizon make it a disaster:

• Narration programs to read pages for the blind go crazy. What the blind person hears is a hodge-podge: content mixed unintelligibly with structure.
• Current browsers are as huge as they are in part because they try to make sense of all this, plus making sense of poorly structured HTML. The next wave of Web access devices, such as cell phones, palm devices, Web TV, voice browsers, etc., will not have enough processing power to deal with this complexity.
• XML is coming. XML adds the ability to say what data objects you have, but does not specify either their internal format in a database or their external format when presented to a user. Once industry standards groups have agreed on enough new tags, XML will take over e-commerce.  Need I say that XML will not tolerate today's sloppy HTML code?

Do We Have to Learn it All?

Not at all. XML is a big subject, and so are Cascading Style Sheets (CSS). The serious student will eventually want to know both thoroughly, but fortunately we can get started on the right road by following some relatively simple rules.

• Follow XML syntax rules for a well-formed document:
• Write all tags in lower case.
• Close all tags. <p> must be closed with </p>.
• Empty items must be closed: we write <br /> and <hr />.
• Tags must be properly nested. Today's browsers will do something with <i>..<b> ..</i> .. </b>. Who knows what, without trying it, but the browser won't complain. XML will complain loudly. Make that <i>.. <b> .. </b> ..</i> if that's what you mean. 
• But don't use deprecated tags like <i> and <b>! Use <em> (emphasis) and <strong>. Most browsers will render these as italic and bold.
• Use CSS to control format, not the various deprecated tags or any of the tricks. The benefits:
• Narration programs will produce much more intelligible speech.
• Web page formatting will be vastly easier and much less error-prone to modify.
• All the tricks go out the window. You want more space between lines? Just say, in the appropriate way and place: line-height:"120%" or whatever you want.

In short, and somewhat oversimplified, XHTML is just HTML written according to the syntax rules of XML. There is more, but if we do that much, and use Cascading Style Sheets, we will have HTML that most modern browsers can handle with no difficulty, and which will be ready for the new devices that are rapidly approaching.

The Basic HTML Structure

The essential core of a well-formed HTML page is:

The "Cascading" in "Cascading Style Sheets" comes from the way we can specify an external style sheet, but perhaps override it with styles that apply only to the one document, and perhaps override both of them with style local to a particular element such as a paragraph.

Look at the source for this page and you will see all three.

And with that, dear readers, I have run out of time. I'm going to publish this, knowing that it is preliminary and has not been checked by more knowledgeable people, because some of you asked for it, and to get feedback. If you see errors or hopelessly unclear passages, send mail!

The exposition will continue with an explanation of how CSS was used in producing this page.