Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
front-end-tech:xhtml:best-practices [Jul 6, 2026 08:29 PM]
45.163.191.6 removed 		— (current)
Line 1: Line 1:
-= 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.