HTML vs. WYSIWYG by Terry Kluytmans

by Joe Gillespie — Aug 1, 1998

Technically, a <TD> should be laid out as follows:

<TD>Your text here</TD>

Instead, many WYSIWYG editors format it like this:

<TD> Your text here </TD>

which may be more readable, but you risk this end result:

OWL

This is a snapshot of a table rendered in Netscape 3.01 Gold for Win95 when beginning and ending <TD> tags were placed on separate lines.

When it comes to coding your HTML, are you a WYSIWYG advocate or one of those die-hard just-give-me-my-text-editor types?

I have to admit that I fall into the latter category, much preferring to take control over my code rather than relying on a WYSIWYG editor (though I do use Carouselle, a text-based HTML editor from Internet Software Technologies, to provide some coding shortcuts).

Some say that hand coding is a complete waste of time - time that could be better spent on other aspects of a site design.

It depends on whether or not you've taken the time to develop a grasp of the underlying HTML code required to construct the pages in the first place.

Many WYSIWYG editors generate all kinds of unnecessary, cumbersome code. Using tables and single-pixel GIFs to force layout is a prime example. Technically incorrect markup is another.

If you've ever belonged to a Web design mailing list, you've no doubt seen the oft-asked question about an image layout that has 'gaps' (like those shown on the left) after being placed within a table. The culprit is most likely the WYSIWYG editor's method of handling the code.

While MSIE might be forgiving of the indiscrepancy as described here, Netscape usually isn't. In other instances, the reverse will be true.

If you want to save yourself a few debugging headaches, then make the effort to learn technically correct HTML via one of the many online sources or books in print. While you're at it, find out what elements are supported by which browser, version and platform.

Remember: what YOU see ain't necessarily what I get. If you're trying to reach the widest target audience possible, then save your DHTML and other 'kewl' and bandwidth-hogging tricks for your portfolio. (Now where's my anti-flame suit?!?)

In summary, and to quickly change the subject... :-)

If you rely entirely on your WYSIWYG editor to do the job for you, without a good grasp of HTML itself, be prepared to spend some time trying to find and fix any errors that you may encounter. And if you're using certain well known WYSIWYG editors, you can manually correct such quirks 'til the cows come home, but as soon as you save the file, it will automatically revert back to its own way (which means you'll have to use some type of text editor to force the changes anyhow).

So who's wasting time? Hmm?

RELATED LINKS:

HTML Editors:

CoffeeCup HTML Editor

Adobe HomeSite (PC)

BBEdit (Mac)

PageSpinner (Mac)

ONLINE HTML RESOURCES:

W3C's Home Page for HTML, including the specifications for HTML 4.0 back to HTML 2.0

NCSA's Beginner's Guide to HTML HTML Goodies - Joe Burns' extensive resource contains over 100 tutorials, Java and JavaScript goodies, and much, much more.

RELATED BOOKS:

The HTML 4.0 Sourcebook by Ian S. Graham, Ph.D., published by John Wiley & Sons, ISBN: 0471257249, features new and expanded coverage of CSS style sheets and dynamic HTML; updates on URL syntax specifications and HTTP 1.1; more information on CGI transaction processing and HTML form-input mechanisms; details about new character sets designed for "internationalized" documents; updated examples and lists of software resources; and more.

The HTML Sourcebook: A Complete Guide to HTML 3.2 and HTML Extensions by Ian S. Graham, Ph.D., published by John Wiley & Sons, ISBN 0471175757 is also an excellent reference.

HTML 4 for the World Wide Web: Visual QuickStart Guide by Elizabeth Castro, published by Addison-Wesley Publishing Co., ISBN 0201696967, has been updated to cover all the new HTML tags for HTML 4. Perfect for beginners, this book presumes no prior knowledge of HTML or even the Internet. It uses clear, concise instructions for creating each element of the Web page, from titles and headers to creating links and adding tables, frames, forms, and multimedia. Full-color foldout chart.

Terry Kluytmans is the owner of Stairway to Webbin', a Web design company located just outside Victoria, BC, Canada. She recently launched KIDiddles, an online resource for parents and educators devoted to the topic of children's music.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float