HTML Best Practices

Table of contents

Introduction

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

Here’s the key rule: keep away Javascript code from your href 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>

Benefits:

Read more about this topic at Evolt.org.

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

The 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 onclick handler of form "Submit" button or you’ll miss the ENTER key event. Be smart and put some Javascript inside the onsubmit handler.

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 corresponding label tag. You can obtain the same logical link between text and form element with the for attribute:

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

Benefits:

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 head section:

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

Benefits:

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.

Read more about this topic at WaSP.org.

Correct use of ALT attribute

A weird behavior of Internet Explorer for Windows regarding image alt attribute makes web designers and developers to think that image’s alt attribute was meant to associate a tool-tip text for an image resource.

Instead, 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">

Note: title attribute is not limited to image elements, but can be used in many other HTML tags.

Credits

Thanks to Lawrence Oluyede for reviewing this article.

— Andrea Peltrin, July 2003.