Tips for writing cleaner HTML

It has been said that cleanliness is next to godliness. This is especially true when it comes to writing HTML. Here are some tips for cleaning up your code.

I have heard many people complain about not being able to read HTML for one simple reason—many Web page designers simply write sloppy code. Well, it’s time to pull out the cyber-mop and learn a few things about writing clean HTML. Here are my tips.

Spacing and indentation
One of the truly wonderful things about writing HTML documents is that you can use whatever kind of spacing methods you like. Unlike some programming languages—such as COBOL or PASCAL—an extra space is not going to affect the meaning of the HTML, which not only gives us a chance to write more readable HTML—it allows us to have flexibility in our approach.

Indentation is perhaps the single most helpful tool in writing an HTML document. Indenting our code allows us to line up some of the opening and closing tags so that we can easily see what is a part of each tag. For example, Figure A shows how proper indentation can help when you’re designing or altering a simple table.

Figure A
Here’s a sample of indented HTML you can use to set up a simple table.

By using this method of spacing, it is easy to see the separation between the actual information (links and images) and the actual code for the table. In this example, all of the <TD> and </TD> tags are aligned as well as the <TR> and </TR> tags. The actual information that goes in each cell is also aligned so that it’s easy to go back and make changes later (especially if you’re in a hurry).

Keeping tags in order
It is considered proper HTML programming to place your opening and closing tags in a certain order. For instance, when including an image that serves as a link to another page, there is a simple order to follow:
<A HREF=" "><IMG SRC="picture2.gif"></A>

Here you open a tag, insert an image, and then close the tag.

When there is extra code involved, sometimes this whole tag order business gets a little hairy. However, we should be careful to keep a consistent pattern for a couple of reasons:
  • It makes the code easy to read and understand
  • It allows the code to do its job

Figure B shows an example of what can happen if you don’t follow a consistent pattern with the order of your tags.

Figure B
Tags that are slightly out of order can have an adverse effect on the way your Web page appears.

As a general rule, you always want to close the tags in reverse order of how you opened them. This may sound a little confusing, so let’s take a look at this code:
<P><A HREF=""><FONT FACE="Verdana,Arial,Helvetica,sans-serif" SIZE="2"><B>Domain Name Text Goes Here</B></FONT></A></P>

In this code sample, there are four opening tags (paragraph, link, font, and bold—in that order). The closing tags are in reverse order (bold, font, link, and paragraph). In HTML, you have to first close the last tag that you opened and follow that pattern until all of the tags have been closed. Here’s a tip: Neverforgettocloseatag. If you do, your HTML won’t function properly.

A word about capitalization
HTML code isn’t case sensitive; however, it is a good idea to choose either all lower case or all upper case tags. The main reason is because it makes the document more aesthetically pleasing and easier to read. Personally, I like to use all caps when coding my tags. This provides a nice contrast to the text, which is usually in mixed case. Here’s a sample:
<FONT SIZE = “2”>Here is my text. It’s easy to read because the font tags are in all caps. </FONT>

Condensing tags
One of the easiest things to do to clean up your coding habits is to condense code whenever possible. Condensing code simply means taking several related tags and making them one. For example, consider this messy code:
<FONT SIZE=”2”><FONT FACE=”Verdana,Arial,Helvetica,sans-serif”><FONT COLOR=”#FFFFFF”>Insert Text here</FONT></FONT></FONT>

You can make that code easier to read by condensing it to read:
<FONT SIZE=”2” FACE=”Verdana,Arial,Helvetica,sans-serif” COLOR=”#FFFFFF”>Insert Text here</FONT>

The main advantage in this example is that we don’t have three end font tags. Of course, sometimes there is a certain advantage in separating these tags. In the HTML shown in Figure C, I separated the font tags because I want the font face to be consistent. However, I want the sizes and colors to vary at different points in the text. A case like this would be the only time we would need to separate the font tags. (Don’t forget to close them in the right order!)

Figure C
In certain cases, you’ll want to separate the font tags in order to achieve a specific effect.

The importance of closing tags in the correct order really shines through here. Just by changing the placement of a few tags, you can alter the size and color of your text.

Commenting your code
Comments are a wonderful tool for all of us to use (hint, hint). Comments allow us not only to define segments of code, but they provide a way to make editing the code a much easier task. One of the oldest tricks in the developer’s book is to include some eye-catching comments to draw attention to where certain parts of text, images, or code segments should be entered.

For example, let’s say you work for a Web development team that has to update pages weekly (or even daily). If you’re using a code editor, you must insert blocks of text into certain parts of the HTML document. The process goes much faster, and it is much easier to know precisely where to insert the text, if there is a comment like this one right above where the text is suppose to go:
<!— ————— INSERT STORY 1 HERE —————— —>

The extra dashes are used to draw your attention to the comment line. You can just as easily use something like this:

You might even want to use something more eye-catching, such as:
<!— ####### INSERT STORY 1 HERE ####### —>

For those of you who aren’t familiar with how to use comments in HTML, the open comment tag is “<!—“ and the end comment tag is “—>”. Anything between these tags will not appear on the browser screen, and neither will it alter the meaning of the code. Getting into the habit of commenting your code is useful when you’re experimenting with HTML code and trying to figure out exactly what you want to do with the page you’re designing.

For example, here’s a trick programmers have been using for years. Let’s say that you are writing an HTML document and you add a table just to see how it will look. If you’re not really happy with the way it looks—but you think you might want to use this table later—you can comment the table out rather than deleting the entire segment of code and having to enter it again once you decide to change your mind. All you have to do is place the open comment tag before the table and the close comment tag after the table. Once you decide that you actually want to use it, just take out the comment tags. It’s that easy!

A good HTML document should be adequately commented throughout. At the beginning of every major segment of code, there should be a comment. It’s not a painful process, and it doesn’t take much time, but the benefits are numerous.

Here are some sample comments that help remind the author of an HTML document about the document’s format. Trust me—you’ll appreciate that when you have to go back and change something.
<!— ————— BEGIN SIDE BAR HERE —————— —>
<!— —————— END SIDE BAR HERE —————— —>
<!— —————— This section of JavaScript calculates the user’s Operating System —————— —>
<!— ————— MAIN TABLE —————— —>

Good comments also help others to understand your code. A good HTML document is commented so that a person with minimal HTML coding experience can fully understand what each section of HTML is suppose to do.

Commenting can also especially be handy if you don’t want a certain section of your HTML to be altered. I like to define the beginning and ending sections of the blocks of code that I’m commenting. That way, there’s no confusion about where the specific block of code begins or ends. Here are some samples:
<!— @@@@@ BEGIN - DO NOT ALTER THIS SECTION @@@@@ —>
(Here’s where you’d list the commands you don’t want altered.)
<!— @@@@@ END - DO NOT ALTER THIS SECTION @@@@@ —>

HTML heaven!
That’s my take on what your HTML should look like. Use these tips to create clean, commented HTML, and you’ll help make cyberspace a better place.

Robert Jason Smith is a computer information systems student by day and an Internet production assistant at an online newspaper by night. He actually enjoys spending long hours in front of his computer designing Web pages—go figure!

Editor's Picks

Free Newsletters, In your Inbox