Last Updated: 03 Mar 2009


Author: dordal

HTML / XHTML Best Practices


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:

<!-- 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">

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 <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.

ALWAYS use &amp; 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 &amp; instead of & in the phrase Bob &amp; 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.


Enter your comment. Wiki syntax is allowed: