HTML / XHTML Best Practices

There are pros and cons to both HTML and XHTML.

When creating form fields, you need to give them both a name attribute and an id attribute (which should be the same. Then only use the id for referencing them, using document.getElementById(). More on ID vs. Name in Form Fields

<label> is a neat, if underused, tag that lets you indicate that some bit of text should be 'attached to' a particular form element. If the user clicks on the text, the form control is toggled.

Use it like this:

<!-- if somebody clicks on the text 'Enter Your First Name', then 
the cursor will be put in the 'firstName' text input field -->
<label for="firstName">Enter Your First Name:</label>
<input type="text" name="firstName" id="firstName">

It's rather popular these days to put a bunch of related images in a single file, and then use positioning to show the appropriate image where you want it. If you do this in a form (say for a 'Save' button), your form won't have a true <input type=“submit”> button. Instead, you'll have a <div> (or <a> link or something) that probably has an onclick event handler to run your form submission code.

This works great if you click, but falls apart in Firefox and IE6/7 if a user presses enter in the form. Thus always be sure to include a real submit button, either a true <input type=“submit”> button, or an <input type=“image”> button with an onclick handler. That will allow the enter key to work in all browsers. If you want, you can still use the background image positioning technique using an <input type=“image”> button.

It's a fairly well known fact that you need to encode certain characters, such as ampersand, as an HTML entity. In other words, use & instead of & in the phrase Bob & Susan. What isn't quite as well known is that you must do this everywhere, including in URLs. So the URL:

/foo.php?foo=bar&raz=jaz

is invalid (X)HTML. You must use:

/foo.php?foo=bar&raz=jaz

for your document to validate.