Refactoring HTML: Improving the Design of Existing Web Applications | 4

Refactoring HTML: Well-Formedness - Part 2

Elliotte Rusty Harold

Digg This Add to del.icio.us

Fill In Omitted Attribute Value

Add values to all valueless attributes.

<input type="radio" name="p" value="debit" checked></input> <input name="generator" value="system78" readonly></input> <input name="date" value="2007-12-17" disabled></input> <a href="https://example.com/imagemap/library"> <img src="duane.png" ismap></a> <input type="radio" name="p" value="debit" checked="checked" /> <input name="generator" value="system78" readonly='readonly' / <input name="date" value="2007-12-17" disabled="disabled"></input> <a href="https://example.com/imagemap/library"> <img src="duane.png" ismap="ismap"></a>

Motivation

XHTML does not support the attribute name-only syntax.

Potential Trade-offs

Minimal. Browsers are perfectly happy to read the values you supply.

Mechanics

Omitted attribute values are fairly rare in practice. The only place theyre at all common is in forms and image maps. It may well be possible to manually fix all occurrences on a site without a great deal of effort. Alternatively, you can just use Tidy or TagSoup.

To fix one, just set the attribute value to the name. For example, change this:

<input type="radio" name="p" checked>

into this:

<input type="radio" name="p" checked='checked'>

Only a few elements and attributes support valueless attributes in the first place:

input: checked, disabled, readonly, ismap optgroup: disabled option: selected, disabled textarea: disabled, readonly button: disabled script: defer img: ismap, controls area: nohref dl: compact ul: compact ol: compact ul: compact, plain frame: noresize table: border marquee: truespeed link: disabled style: disabled applet: mayscript select: disabled, multiple object: declare

Because many of the words involved can appear in plain text, it is not safe to use regular expressions to replace these. However, you can use a simple search to find them and then verify and fix them manually. For the attributes that aren't actually English words, such as ismap and mayscript, just search for those words. For the attributes that are, such as border and compact, use a regular expression such as this:

<.*\s+compact\s+.*>

Then search for the case where the valueless attribute is the last attribute:

<.*\s+compact\s*>

URL: