To WYSIWYG Or Not To WYSIWYG?

By Marc Bissonnette
Posted Friday, October 1, 2004

This article was inspired by my latest client project, a web generator that creates web sites on-the-fly based on form input.

The concept for the scripts themselves are relatively simple: take all the input from a form and put those values in place of some pre-defined places within a template form and write a new file, unique to each new user.

There were two problems in developing this product: The first was the fact that all of the HTML files were created by a Macintosh, resulting in some funky control characters that only the Solaris system would see and thus cause the scripts to hiccup (Of course, on my PC, these files appeared perfectly normal). And the second was the absolutely horrible quality of HTML the WYSIWYG editor my client used generated.

The first problem was easy to solve, literally cut and paste the entire file into a new text file and save as ASCII text (or run a conversion utility, same result) the second, however, required almost completely re-writing the HTML to something approaching a standard quality.

There are several reasons for having structured HTML code and I'll cover a couple of them here, but first, I'll quote from a book I've used occasionally for Perl reference, and this sums it all up very nicely:

"Using Perl for Web Programming"
(Written by David Harlan, Shelley Powers, Paul Doyle and Michael O Fohlu, Published and Copyright 1996 by Que Corporation)

"Form design is a key step in the creation of a CGI application that programmers often overlook. If you are working with a form that has poorly named variables or strange values for check boxes or menu items, writing the program is more difficult. I recommend that you spend significant time getting the form right before you get too deep into your programming; you'll save time in the long run. Also, it frequently makes more sense to change the form than to go through some programming magic to make the form do what you need it to do."

This quote is * so * true! Basically, if you're creating a site that will either:

remain static (not change much)
be maintained by the same people
not use any complex CGIs
Then your HTML style and quality is pretty much irrelevant, as long as it displays properly to your target audience. If, however, your site, or your client's site is destined to be maintained by people other than your own, or will be using more complex CGI scripts, it is well worth your while to consider learning the raw HTML yourself.

There are several advantages to knowing HTML by heart:

You can do things in HTML right off the bat, as you become aware of them, or as they become available, without waiting for an update to an editor.
Your code (should be) much more easily readable by other coders, be they in your own team or subsequent site managers.
You have the pride and right of saying that you're a "real" html programmer, rather than a button pusher :)
Complex CGI's, such as search-and-replacers, some forms of search engines, cataloguers, etc, will be able to read and parse your code more efficiently.
Your code tends to be much tighter than a WYSIWYG editor (Properly done, there is more white space to your code, but browsers ignore that).
Troubleshooting your sites tends to be much easier, since you *know* the code and what does what.
There is nothing to say that you shouldn't use a WYSIWYG editor for redundant or quick-and-easy tasks (although I have yet to see an editor that creates a proper table format), though you should always go into the code itself and clean up any quirky layouts your editor may create.

If you're still new to HTML, and have to use an editor to get started quickly, I'd recommend an editor that shows you the code as you create it. Personally, whenever people ask me about editors, I always recommend (after suggesting they learn the language itself) Hot Dog Professional by Sausage Software (http://www.sausage.com/) as their first-exposure to HTML. It's a WYSIWYG editor, but it shows you the HTML in a separate window as you edit, thus actually teaching you the language as you go. This is a Good Thing, since you will eventually become much less reliant upon third party software to maintain your living :) (I'd recommend Allaire Homesite as another great tool which color codes HTML tags - Ed)

Rather than take up a chunk of this newsletter with samples, I've put a sample page with good code / bad code up here:

(www.internalysis.com/nwex.htm)

Naturally, in the "proper" half of this sample code, you can go even further with the indentation, in order to be 100% technically correct, but I feel the trade-offs here are minimal to retain both "good coding" standards, as well as readability.

About the Author
Marc Bissonnette, InternAlysis Corporate Internet Research and Results! (http://www.internalysis.com/)