April 18, 2005 9:56 pm

Tip of the Week: Writing XHTML

:note:

I totally forgot about my tip of the week until I read JessicaRabbit’s. So I will do mine a day late. I hope you can forgive me.

Writing XHTML

First, I will explain what HTML, XML, and then XHTML is. HTML is the code that programmers use to “mark-up,” or code webpages. It is meant to organize information, not control how it looks. Therefore, if you’re using <font> tags, just stop. Now. It’s for your own good. CSS can be used to accomplish all that and more.

XML was designed to describe data and to focus on what data is – it doesn’t do anything. It just holds information. In XML, you make-up and create your own tags. If you had an XML document that you wanted to hold addresses, you might have a <firstname> tag, followed by a <lastname> tag, and so on and so forth. <firstname> and <lastname> tags do not exist in HTML, you made them up. I might eventually post some XML files on my nutmegg site so you can see what they look like. They’re very boring.

XHTML is HTML defined as an XML application. It is meant to replace HTML and is basically a stricter and cleaner version of HTML.

Now that that’s out of the way (if you have questions, comment and I’ll try to help) I can begin letting you know how to write XHTML. There are a few main differences between it and regular HTML.

1. XHTML must be well-formed.
What this means is that you can’t put tags out of order. An XHTML document should start with the <html> tag, just like HTML does, and the <head> and </head> tags should come next, followed by the <body> and </body> (with your content in between, of course) and then the </html> tag. You can’t be putting the body before the head and things like that.

2. Elements must be properly nested.
This kind of goes along with the well-formed bit. Basically, if you have something like <b><i>This text is bold and italic</b></i> it’s wrong because the end tags are out of order. You opened the italic tag inside of the bold tag, so you should close it inside of the bold tag. Not very difficult.

3. All elements must be closed.
This sort of goes along with the previous two as well. Notice how these tags all have an open and a close tag? You MUST have both in order for it to be XHTML. What about things like image tags, or line breaks, that don’t HAVE an end tag? Simple. You “self-close” the tag, meaning that you put a space and a slash before the ending triangly bracket. Example: <br /> -or- <img src=”blah.gif” />

4. All tags must be in lowercase.
This one’s easy. It’s not hard to write code in lowercase. In fact, I personally think it’s harder to try to write it in all uppercase. Anyway, just for the sake of having an example, this: <BODY> is wrong, <body> is right.

Other than those four (relatively easy) things, XHTML is exactly like HTML.

To see if your code validates, you should first have a doctype definition, aka a DTD. All that is, is a bit of code in the beginning of your page that tells a browser what kind of language the page is written in, and what sort of rules to test it against to see if it validates. The W3C has a list of available DTDs for you to choose from. You should know what language you’re writing (this would be XHTML 1.0) and you choose the one based on your needs. If you use frames (eep!) you should use the one labeled XHTML Frameset. XHTML Strict is what it sounds like – the rules are more rigid and it will display things a bit differently than XHTML Transitional. I myself use transitional, because while I typically code well enough for it to validate as strict, I don’t like how the browsers display it. It’s up to you.

Once you have your DTD, run your page (still with a .html or .htm extension, no need to change it) through the W3C’s HTML Validator and it will tell you exactly what you need to fix.

XHTML is very easy. As according to w3schools.com, “XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write “well-formed” documents now, ones that work in all browsers and that are backward browser compatible!”

I hope you’ve enjoyed this weekly installment of Meggan’s Tip of the Week.

File Under: , ,

Tagged: No tags

Comments are closed here.