Habits for developing tidy pages


In this month's article, I will share with you some tricks I apply on every page to keep them tidy.

Learn the basics first

Some editors make the mistake of rushing headlong into the more advanced HTML tricks before they have mastered the basics. The secret to developing good pages on the Web is to keep your designs simple and make sure you are consistent throughout. The more complexity you add, the harder your pages are to maintain.

If you examine my pages, you will see that I try to stick to a subset of the HTML language I know well, and which keeps my pages simple and effective. Glitz is fun, but the primary goal of web-page design should be to communicate, not to dazzle. I will share with you what I find works on my pages to keep them neat and functional.

Considerations for reading this article

I design text-only pages that look best in Lynx. Therefore, my comments in this article will refer to how this document looks in Lynx on an 80-column screen, not in Netscape or other browsers. Also, I encourage you to use "\" to examine my HTML in this article.

Preventing unsightly wraps

A pet peeve of mine is when the text of a link wraps off the end of a line and onto the next. I find it makes a document look untidy, and therefore have developed some simple habits to prevent it from happening.

Using the non-breaking space to prevent wraps

The habit I have developed to solve this common problem is simple. Everywhere I have a link, instead of putting blanks between the words, I use the special character  . For instance, the link to the next sentence wraps across two lines. However, the link to the previous sentence stays all on line because it has   characters between the words.

Use this trick anywhere you have text you don't want to break across two lines, but especially when you have a link in the middle of a paragraph or a "button".

When the text is too long to keep together

Sometimes, the text is just too long to keep together. That is, if you have a link that is several words long and appears near the middle of a paragraph, it will look funny if you put non-breaking spaces between every word. A short line will appear in the middle of your paragraph, as in the link in the previous sentence (that just links to itself).

In this case, you can re-word your paragraph so that the line-break is not as severe. Alternatively, you might want to just shorten the text of the link. You may even decide that a link in the middle of the text is not needed.

Prevention of wraps at the root cause

Sometimes, I find that linking in the middle of a paragraph is too much of an interruption, so I keep the paragraph relatively link-free and put references that supplement the paragraph after it in a list. Because each link in a list starts at the beginning of a line, it is unlikely to ever wrap.

Keeping tidy lists of links

If you resort to lists as a way of keeping your links neat, you may still run into trouble, because you might find that short descriptions are not enough.

For example, let's look at an unnumbered list I have prepared below to illustrate how not to write lists of links.

Life: What is it about anyway?

The problem with this list is that each item has been made into a rather untidy link that more often than not spans across two lines.

Use definition lists when list items are long

In addition to using the techniques for preventing links from being broken across two lines presented earlier, we can rescue this list by turning it into a "definition list".

Life: What is it about anyway?

The first in a series of essays on the meaning of life
Collected letters on life, the universe and everything
April, 1993 -- November, 1995
"Life is like a ..."
the fourth book in a series of 90 poems and short stories
The definition list is much tidyer than the unnumbered list when each item has more than one line of information. Use the "term" element: <dt> for a short summary of the item which will be the text of the link itself. The "definition" element: <dd> is for a lengthier description beneath it. If you examine my HTML for this particular list, you will also find I use the "compact" attribute to produce a list with no blank lines: <dl compact>. I habitually use <dl compact> because I find it looks better in Lynx than the gappier <dl>.

Develop your own habits

As you work on keeping your pages neat, you will discover more things on your own. Take note of what you learn and go back and apply it consistently to all of your old pages and for every new page you write.

Finally, if there are things you have learned that help keep your pages simple, tidy, and functional, I'd like to hear from you.



is edited by Ben Armstrong
who is happy to receive Questions, Comments or Suggestions.
If your browser does not support mail, write to Ben later at aa458@ccn·cs·dal·ca.

Last Month: November 1995 Next Month: January 1996