Last Updated: 03 Mar 2009

   |   

Author: dordal

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:

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

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

is invalid (X)HTML. You must use:

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

for your document to validate.

Discussion

Enter your comment. Wiki syntax is allowed: