If you’re like me, you’ve been learning how to design and build websites on your own, mainly by finding a site that you like and reverse engineering the code to see how the author made something work. There are some really great books and web resources out there to teach you the fundamentals. Sometimes it’s difficult to sort through the massive about of information and decide what is the most important to grasp. I believe that the thing the separates great artists and technicians from everyone else is how well they understand the basics. Here are a few of the foundational concepts regarding well-formed XHTML to make your CSS pages display more predictably across browsers and platforms.
- DOCTYPES are essential for browsers to know how to render your page, especially older browsers. The three main types are Strict, Transitional, and Frameset. Strict is probably the best choice unless you plan to use deprecated tags. There’s no reason to re-type this code every time you create a page and increase the chances of getting it wrong. Copy the code from an authoritative page, or let your code editor to do it for you. I’ve set Dreamweaver to render the strict type by default.
- XHTML is flexible but it requires your code to be written correctly, which is a good thing. If you can validate your code, it’s more likely to display the way you want it to. All tags need to close. For example: <p>A sample paragraph with a couple of sentences… must end with this tag </p>. Tags that don’t have an enclosing tag, still need to close. These are called empty elements, and the image tag is an example: <img src=”dog.jpg” alt=”My Dog Skip” />
- All tags should be written with lowercase characters. This one is easy to implement.
- Correctly nest your elements. Certain tags are block level elements and others are inline. The div tag (which stands for division) is a block-level element. If you assign a background color to a div and put some content in there, the div will look like a box. Links (or anchor tags) are inline. You can wrap an anchor tag around a word in a paragraph, and it will stay “inline” with the rest of the text. I have been tempted on occasion to wrap a link around a div, which is a no-no. You shouldn’t nest block-level elements in inline tags.
- Use encoded equivalents for “&” and other special characters. You’ve probably noticed a funny character when looking at some web pages and wondered what it is: ?. It’s a white diamond in a black question mark and is called the Unicode Replacement Glyph. To insure that all ampersands, quotation marks, dashes, etc. display properly, use their encoded equivalents. If your authoring software doesn’t suggest a code, check out this reference.
I don’t consider this an exhastive list on how to write proper XHTML because there are many ways to mess it up. It does include some of the most important ideas and the most common errors. Now go and fix all those pages you’ve made that have problems!
