HTML Best Practices
Table of contents
- Keep your pages’ URL accessible
- Build a better form
- Specify a character encoding
- Correct use of ALT attribute
The following are a bunch of best pratices I’ve gathered surfin’ the web that I use in my everyday job as a web designer and HTML coder.
This isn’t in any way a definitive list and eventually will grow in number.
Keep your pages’ URL accessible
attribute. Hence, to open a link in a new named window, write:
<a href="home.html" onclick="window.open(this.href, 'mywin'); return false;"> Visit home page</a>
- Page URL can be added to bookmarks without opening home.html.
- If browser support "tabbed browsing" page can be opened in a different tab.
Build a better form
You can use the less-known
fieldset element to group logically
related form fields, and
legend to decorate grouped elements
with an meaningful text. Use
label to create a logical link
between form element and its text.
It is also a good practice to add a redundant
id attribute that
name’s value, so modern browsers that support W3C
DOM will be able to get the field
element using its unique identifier via a script.
Always think twice before implement only client-side validation for your forms. Consider devices that do not support scripting and users who turned off scripts on their browsers for security reasons (or just to screw up your pages).
onsubmit handler will be called by the browser prior to
submit the form to the web server either by clicking the "Submit" button or
by hit ENTER key. Do not trigger validation code within
handler of form "Submit" button or you’ll miss the ENTER key event. Be smart
Here’s there a sample form:
<form onsubmit="your-code-here" action="/path/to/your/form-handler" method="post"> <fieldset> <legend>Personal information</legend> <label>First name <input type="text" accesskey="n" size="20" id="fname" name="fname" value=""> </label> <label>Last name <input type="text" tabindex="1" size="20" id="lname" name="lname" value=""> </label> </fieldset> <label> <input checked type="checkbox" id="remember" name="remember" value="1"> Remember my personal details </label> <input type="submit" name="" value="Submit" > </form>
Under some circumstances you may not want to wrap a form element with its
label tag. You can obtain the same logical link
between text and form element with the
<form action="/path/to/your/form-handler" method="post"> <label for="fname">First name</label> <input type="text" accesskey="n" size="20" id="fname" name="fname" value=""> ... <input type="submit" name="" value="Submit" > </form>
- Form elements will get focus by clicking on their labels too (especially handy with check and radio boxes).
accesskeywill make form elements quickly accessible via single key-stroke. In the given sample form "First name" field on Windows will get focus by pressing ALT+N.
tabindexallows the web author to override default tab order.
legendenhance CSS styling without using superfluous
classattributes and allows complex DOM manipulations (e.g.: show one
fieldsetat time while hiding the others).
- Screen readers and text-only browser will "understand" better the form.
Specify a character encoding
Encoding information will tell the browser how to display characters outside the range of normal 7-bit ASCII table.
In most cases an ISO-8859-1 (also known as Latin-1) encoding is enough. Such ISO encoding covers american and western languages such as English, French, Spanish and so on.
You can specify the encoding of an HTML page by adding the following line to the
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
This is the most reliable way to control
how characters like à or Ç are displayed by the browser. Without that
charset value the browser may try to auto-detect the encoding
used or trust information passed by the web server (via the HTTP headers). If a web server is not properly configured it might send wrong or
simply incongruent information to the browser.
By adding the above
http-equiv line to an HTML document the
page author overrides web server encoding information and prevents browser auto-detection
- Non-english letters and other special charaters will be displayed correctly on almost every browsers and across all platforms.
Note: pay attention to the encoding used by your fav editor while saving your HTML pages: be sure they match the encoding specified in your pages, otherwise with some web server/browser combinations weird things will happen.
Correct use of ALT attribute
A weird behavior of Internet Explorer for Windows regarding image
attribute makes web designers and developers to think that image’s
attribute was meant to associate a tool-tip text for an image resource.
alt attribute should be used by the browser as a placeholder
when the image is not yet loaded or not available (think about screen readers
or text-only browsers).
If you want to display a tool-tip while user hovers her mouse on the image
just use the
title attribute, as shown in the example below.
<img src="sea.jpg" width="300" height="200" alt="Sea photo" title="Hawaian sea, April 2003">
title attribute is not limited to image
elements, but can be used in many other HTML tags.
Thanks to Lawrence Oluyede for reviewing this article.
— Andrea Peltrin, July 2003.