Take the First CSS Step

There are two things wrong with this from a best practices standpoint. Both have to do with the naming of the classes on the <p> elements: rederror and bolduser both convey presentation information that implies what those elements look like. The standard practice is to avoid basing a name on a description of a “physical” or visual characteristic.

A better solution might be:

<style type=”text/css”>
p.errormessage {color: red;}
p.userfield { font-weight: bold; }
</style>
<p class=”errormessage”>Warning: Username not found!</p>
<p class=”userfield”><label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username” /></p>

The remaining step in improving the sample page is to add dynamic elements after the page has loaded. Unless the elements of the document can serve some purpose when scripts are disabled, it may be best to add the elements after the page has loaded.

The W3C DOM includes a whole series of functions for inserting content and markup into a document. These are highly effective; however, for expediency, Microsoft introduced a proprietary DOM extension called innerHTML that inserts snippets of code into a document. As fate would have it, this method is not only faster to code, but performs faster in the browser as well. The benefits were difficult to deny, so every other major browser vendor that supports W3C DOM standards-based code has implemented this feature. That makes it exceptionally safe and convenient to use. Although some purists balk at its use because it is considered nonstandard, for our purposes here it is too convenient not to use.