What is XHTML? XHTML stands for EXtensible HyperText Markup Language and has replaced the HTML language since early 2000. If you want to manage content, one of the best ways to do it is by writing your own XHTML. Don't worry, its not rocket science!
You don't have to spend hundreds of dollars on web design software, in fact you shouldn't. FrontRage, DreamOnWeaver and GoEvil all produce notoriously bad code. The best things in life are free (or at least cheap). We like skEdit ($20) or TextWrangler (free) for the Mac and HTML-Kit (free) for Windows. Some hard core coders might recommend vim but it isn't for the fainthearted. Of course you can always use TextEdit or Notepad, but please don't use Word - it simply does not save standard HTML or even plain text very well.
Lets assume your designer has done most of the hard work for you and layed out an XHTML template and a CSS style sheet. Now all you need to know to manage content are a few easy XHTML tags. XHTML tags must have a start tag and an end tag, must nest properly (more on nesting later) and must be in lower case.
Paragraphs are pretty easy. They should make up the bulk of your content. Just wrap them in the paragraph tag as shown here.
Since line breaks don't contain any text, they combine both start and end tags into one super tag like so. Remember to use line breaks sparingly and never use them for spacing (use styles instead).
A header is a short title for a section of your site. Header tags come with six options, with level 1 being the top level and level six being the lowest level. You can write them as shown here.
A list is interesting in that it requires a two nested tags. The outer <ul> tag represents the 'unordered list' and the <li> tag tells the browser that this is a 'list item' belonging to an unordered list.
The above code displays this in the browser.
Almost identical to the unordered list is the ordered list, which numbers your list items sequentially instead of creating bullets.
The above code displays this in the browser.
Image tags differ from the other tags we have discussed so far in that they require attributes to work properly. Lets start with a very basic image tag. Lets say you have uploaded an image of a golf ball to a folder called 'images' on your web site. To make that image appear in your web page, you need to tell the browser where to find it relative to the page. Here is an image tag with a 'src' (source) attribute. Note that the image tag does not have a traditional end tag but uses the line break style.
We should tell the browser what size our image is (in pixels) like so.
We might want to add a tooltip (using the title attribute) and we should always use the alt attribute which presents alternative text to screen readers which cannot 'see' the image.
Finally you can apply a style class, or add a simple style to left align an image and 'float' text around it as in this example.
If something in your paragraph requires emphasis or needs to stand out, use the following phrase elements.
We don't recommend altering these elements in your document. Why? You hired a designer for a reason. He or she has taken great care to prepare a style sheet that applies to the entire site. Let's say, however, that you simply must have a paragraph with a red border and yellow background, and bold, centered, purple font on several pages. The best thing to do is ask your designer to create a style class for you to use. You can apply the class to any paragraph by adding a class attribute to the start tag. In this example, your designer has created a class for you that he named “really_special”.
The above code will display the following in the browser.
My special paragraph.
You could achieve the same thing yourself like this:
but the advantages of using classes should be obvious. Above all else do not attempt to insert outdated HTML into your XHTML document (such as the cursed <font> tag). This will ruin the document and make it very difficult to maintain and access.
Do you really need a table? Ask yourself if you need to show tabular data. If you just want to show text as two columns, the answer is no and there are better ways to do it. If you want to display something like the output of a spreadsheet, for example, read on. An XHTML table is made up of at least three tags and possibly more. This example shows a three column table with one header row and three data rows. Note the first row, first column uses XHTML code for an empty space.
That code might produce something like this, depending on your table styles:
| Friday | Saturday | Sunday | ||
|---|---|---|---|---|
| Jenny | Wash Dishes | Vacuum Floor | Laundry | |
| Billy | Vacuum Floor | Laundry | Wash Dishes | |
| Cindy | Laundry | Wash Dishes | Vacuum Floor |
Once you are done writing content you should make sure it checks out properly.
It's a good idea to check how your page looks in several modern browsers. We test our sites in four major browsers (Mozilla Firefox, Apple Safari for Mac, Microsoft Internet Explorer for Windows and Opera). If you don't have a mac available don't worry too much (well you should worry about spyware but that's another story). Firefox, Safari and Opera tend to produce similar results since they use similar interpretations of the standards.
Now for a rant... For unknown reasons Microsoft did such a poor job following standards with Internet Explorer 6 that it makes life difficult for the designer and increases the time it takes to develop a web site. It also has literally hundreds of security vulnerabilities. If enough people switch to an alternative browser perhaps they will get the message and fix their bugs - so spread the word! In the mean time keep a copy of IE around for testing but please don't use it otherwise, it's far too dangerous.
Once you are done, you should validate your code to make sure you didn't do anything wrong. Just go to http://validator.w3.org/detailed.html and enter the full URL of your page (the file must be available on a public web server) or go to http://validator.w3.org/file-upload.html to check an xhtml file that is still on your computer.