When you're busy writing your Web pages, it's often too much to worry about how your HTML looks. I mean, who's going to see it? Well, for one thing, you might be surprised. Many people view the source of Web pages. But even if you don't care about the source voyeurs out there, there are other reasons to keep your HTML tidy.
- Sharing Code
When you write HTML for an organization, you will find that you often share the code with other developers in the company. If your HTML is clean and tidy, it will be easier for the other developers to read it and understand what you're doing. - Managing Older Pages
You may not think so now, but after you've been writing pages for a site for more than a couple months, you'll have so many files that you won't remember what you did on each one. If your HTML is clean and easy to read, you'll be able to find special parts quickly and manipulate them easily.
How to Clean Up HTML
The first thing to remember is that you will always have your own style. Some developers like code indented while others like things kept all together, just with line breaks periodically. First I will give you some good rules of thumb, and then some specifics to my HTML style.
Rules of Thumb
- Do not put spaces or new lines between <a> tags and the link text or
images:
<a href="...">
Do Not Do this
</a>
When you add spaces after the beginning anchor tag or before the ending anchor tag, you risk having browsers add little dashes at the end of the link. This can often ruin what is otherwise a beautifully designed site. - Do not put spaces or new lines between <td> tags and the link text
within them:
<td>
Do Not Do this
</td>
Just like with the anchor tag, some browsers will add the newline or whitespace as extra spaces within your tables. Now, if you're writing XHTML and not using tables as layout, this won't really matter. But if you do use tables as layout controls, you may be unhappy with the results. - Choose a width for your HTML. I prefer 80 characters, or so, wide. I have my HTML editor (HomeSite) display a visible line at 80 columns. When I hit that line, I try to hit <ENTER> so that my HTML is readable.
- Don't go crazy with indenting. One of the most common methods of managing HTML is to indent various parts (such as tables, and so on), but there is such a thing as too much indenting. When you've indented so far that you're up against the 80 column margin, you've probably indented too much.
My Preferences
- Indenting
I don't do a lot of indenting, but I like to indent things like list items from the list definers (ol, ul, etc.). I also indent table rows and cells but only once. I don't indent nested tables. - Spacing
I use spaces rather than tabs for indenting. And I use only 2 spaces. I do this because that takes up less room in the document. - 80 columns width
As I said above, I try really hard to write my HTML with a width of about 80 columns. This makes the scan lines easier for other developers to read. - Paragraphs
I don't like to have the paragraph tags right up next to the text. I like a newline between the paragraph tags and the text. - Long Tags
When I have a tag that is longer than 80 columns, I like to split them into two lines. You must be careful when you do this, especially with images, not to split the image tag in the alt text. Some browsers don't allow carriage returns within attributes.
Help is Available
While you might write your HTML straight in a text editor, or you might write it
in a WYSIWYG editor, but either way, there are tools available to put your HTML
in the format that you want it to be in.
-
HomeSite
One of my favorite attributes of this editor is that it will "sweep" your HTML code for you.
How to use the HomeSite CodeSweeper
How to create a new HomeSite CodeSweeper template - Pretty HTML
This is a Linux tool that does your indenting for you, plus it adds correct quoting to make your XHTML more valid. -
CGI::Pretty
A Perl module to produce nicely formatted HTML code.
