Last Updated: 03 Mar 2009
HTML / XHTML Best Practices
HTML vs. XHTML
There are pros and cons to both HTML and XHTML.
ID vs. Name in Form Fields
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
Use <label> for form field text
<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:
Make sure every form has a proper submit button or image
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
<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.
ALWAYS use & and not & ... even in URLs
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:
is invalid (X)HTML. You must use:
for your document to validate.