= HTML / XHTML Best Practices =

=== HTML vs. XHTML ===

There are pros and cons to both [[HTML vs. XHTML|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:<code html>
<!-- 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">
</code>
== Make sure every form has a proper submit button or image ==

It's rather popular these days to [[front-end-tech:css:multiple-buttons-one-image|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 [[front-end-tech:css:multiple-buttons-one-image|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: <code>/foo.php?foo=bar&raz=jaz</code> is **invalid** (X)HTML. You must use: <code>/foo.php?foo=bar&amp;raz=jaz</code> for your document to validate.