World Magazine 2024
Clean Code, Sloppy Code, or maybe something in between?
Every day we hear people complain about being unable to read HTML code. On the other hand, we also listen to complaints from IT personnel and users alike, about how long it takes for relatively simple as well as complicated pages to load. Here’s are two schools of thought, and we felt we would let you decide. The tips presented here have been excerpted from the writings of a reasonably intelligent Web designer who shall remain nameless. In blue, you will find responses from competent IT managers and their feelings about unnecessary blank spaces in HTML 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.
This is one mans opinion who obviously has no concept of how a Web server serves up content to users. While, indeed, HTML code is not a computer language such as COBOL or PASCAL, it is a code that must be processed by the Web server and by the browser. Every character, no matter how insignificant, must be interpreted and processed, and that includes blank spaces.
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
tags are aligned as well as the
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).
While clarity to Web designers is important when writing code and designing Web pages, creating the number of spaces as noted above is absolutely ludicrous. Certainly there must be allowances made for the beginning Web designer, however that in itself is not an excuse for serving up pages with enormous blank spaces. Here is an example of the same code proposed above. Not only is there clarity for the beginner, but also a reasonable compromise on the blank space issue.
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:
Domain Name Text Goes Here
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: Never forget to close a tag. 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:
Here is my text. It’s easy to read because the font tags are in all caps.
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:
Insert Text here You can make that code easier to read by condensing it to read:
Insert Text here
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:
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:
For those of you who aren’t familiar with how to use comments in HTML, the open 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.
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:
(Here’s where you’d list the commands you don’t want altered.)
