Web development: best practices
Someone at work just pointed me to an excellent article from Apple: Web Page Development: Best Practices. It's not quite the intro-to-modern-web-page-creation piece I was talking about writing the other day; in particular, it assumes you already understand the basics of CSS. But it does a great job of bringing together and presenting a bunch of different concepts, and it provides pointers to a bunch of great resources I've never seen before.
The most immediately useful piece of the Apple article for people who learned to code in the wild days of the untamed HTML frontier and are interested in modernizing their coding practices is the section titled "XHTML." It doesn't explain why you should be using XHTML, or what XHTML is; those are things I'll cover if/when I ever do the intro/basics article. (Don't hold your breath; it's yet another Big Project, to go with the dozens of others lining the back burners of my brain.) But it does provide a very simple set of guidelines for how to code in XHTML if you're used to HTML. I'm gonna crib their list, with some small modifications/clarifications:
- Make all your tags lowercase (
<p>instead of<P>). - Close all your tags, even empty ones; in XHTML, you close an empty tag by putting a space and a slash before the closing angle bracket (
<br />and<hr />instead of<BR>and<HR>). Note also that the<p>tag is not an end-of-paragraph marker; it marks the beginning of a paragraph, just like<body>marks the beginning of the body section of a page, and so you should have a</p>closing tag at the end of the paragraph. - Make all attribute names lowercase and put all attribute values into quotation marks (
<td colspan="2">instead of<TD COLSPAN=2>, andonmouseoverinstead ofonMouseOver). - Assign a value to all explicitly mentioned attributes (
<input type="checkbox" checked="checked" />instead of<INPUT TYPE=checkbox CHECKED>). - Nest all your tags correctly.
The best way to be sure that you're using valid XHTML is to run your page through the official W3C validator; unfortunately, before you can do that you need to assign a DOCTYPE and do some other stuff, as described in the Apple article. And as the Apple article notes, the error messages provided by the validator are not the most intuitive in the world.
But for most simple pages, if you're used to using HTML, you'll probably want to use the following DOCTYPE line at the beginning of your new XHTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I think that should be sufficient to let you use the validator. A real discussion of DOCTYPE issues is way beyond the scope of this entry, though.
