HTML and CSS Reference
In-Depth Information
<div id='footer'>
<a href="">
<img src="/images/logo-footer.gif" alt="Example Inc."
width='70' height='41' />
<li>© 2007 <a href="">Example Inc.</a>.
All rights reserved.</li>
<li><a href="">
Legal Notice
<li><a href="">
Privacy Policy
<li><a href="">
Now, you may object that in Listing 1.2 I haven't merely reformatted the code. I've also changed it. For
instance, a table has turned into a div and a list, and some hyphens have been removed. However, Listing 1.2
is actually much closer to the meaning of the content than Listing 1.1 . Listing 1.2 may here be assumed to use
an external CSS stylesheet to supply all the formatting details I removed from Listing 1.1 . As you'll see, that's
going to be one of the major techniques you use to refactor pages and clean up documents.
I've also thrown away the TARGET="_blank" attributes that open links in new windows or tabs. This is usually
not what the user wants, and it's rarely a good idea. Let the user use the back button and history list if
necessary, but otherwise open most links in the same window. If users want to open a link in a new window,
they can easily do so from the context menu, but the choice is now theirs. Sometimes half the cleanup process
consists of no more than removing pieces that shouldn't have been there in the first place.
Line Length
Listing 1.2 is still a little less than ideal. I'm a bit constrained by the need to fit code within the margins
of this printed page. In real source code, I could fit a little more onto one line. However, don't take this
to extremes. More than 80 or so characters per line becomes hard to read and is itself a minor code
A small exception can be made here for code generated out of a content management system (CMS) of some
kind. In this case, the code you see with View Source is not really the source code. It's more of a compiled
machine format. In this case, it's the input to the CMS that should look good and appear legible.
Nonetheless, it's still better if tools such as CMSs and web editors generate clean, well-formed code.
Surprisingly often, you'll find that the code the tool generates is a start, not an end. You may want to add
stylesheets, scripts, and other things to the code after the tool is through with it. In this case, you'll have to
deal with the raw markup, and it's a lot easier to do that when it's clean.
Smell: The CEO Can't Fill Out His Travel Expense Vouchers
Search WWH ::

Custom Search