Debate – Hand Coding: the Ultimate Freedom

It’s another SitePoint Debate! Today, two experienced developers argue whether it’s better to hand code your HTML, or create Web pages in a WYSIWYG editor. Don’t miss the opposition’s arguments — they might just change your opinion on this controversy…

When it comes time to sit down and write the HTML code for your new site’s layout, you have two choices: to use a WYSIWYG (what-you-see-is-what-you-get) editor, or to write the code by hand in a text editor like Notepad.

Both methods have a learning curve. Herein lies the decision all developers must make: to use a WYSIWYG editor to generate your html code, or to invest considerably more time to learn to “hand code” your HTML.

For those of you who don’t already know, the basic selling point of a WYSIWYG editor is that it’s easy to use. You can create your whole Website without writing any code. Instead of writing out <img src="images/main.jpg">, you simply choose Insert > Image and the code is produced for you. This is much more advantageous when using tables, not just inserting images. Instead of many lines of seemingly complicated HTML, you just tell the editor how many rows and columns you want, and it does the work for you.

Dreamweaver, the most popular editor costs $399 on Macromedia.com. Crimson Editor (a great notepad replacement) is $0.

HTML is NOT for Everyone

While using a WYSIWYG editor to generate the code for you may be an attractive option, in the long run it is will not give you the best end result.

Coding layouts can become very confusing. The most difficult part of html is using tables, and most layouts use well over a dozen tables (sometimes many more) to achieve the correct look. You need to spend a lot of time working with html to become comfortable with the coding for layouts like that. Learning the code to do it by hand is a much greater time investment than using an editor.

Let me make this point clear: for people who are only going to make one or two Websites, it may not be worth their time to learn HTML (not to the extent to be able to code complicated layouts). For these people, using an editor is probably the better choice. However, for those who are in the business of creating Websites, if you hand code, you will be better off than, and have an advantage over the people who use WYSIWYG editors to write their code.

To say hand coding is better because using an editor is “cheating” is just ignorant.

The Learning Curve

You really don’t feel the full benefits of learning HTML until you are comfortable coding complicated layouts and have spent a considerable amount of time working with code. This means it takes more time to get started making sites.

Now this doesn’t mean that you’re going to just waste this time. If you have no prior HTML experience, learning to use an editor can be quite a task, maybe even comparable to learning to hand code. In practically any book store these days, you will be able to find several 500+ page books about Dreamweaver and Frontpage, not to mention the tons of tutorials that come with each. Going through all these would take a full day or two, at the very least.

The standard way to code is to use many tables to position the elements on your site. Yahoo.com uses approximately 35 tables on their homepage, while SitePoint.com only uses about 15. Coding a layout like this can get quite complicated.

However, HTML is markup — it’s not as complex as most programming languages. Learning to code tables is achievable for anyone, regardless of their experience with computers or other languages. As long as they have the desire, anyone can learn to code tables by hand in a few weeks — or less — with some routine practice, and a little patience.

However, now this time-tested method of using tables is becoming superceded by CSS Positioning. This is a new way to position elements on your page without using tables at all. Instead of coding a table to force an element into the spot where you want it, you can tell the browser where to put it (for example, 100 pixels below the top margin and 250 pixels away from the left margin). This is and will continue to make things much easier for Web developers, and specifically much easier for those who hand code. There are many other added benefits of using CSS-P, such as having a smaller file size for your page, making your content easier for search engines to index (resulting in a higher rating in the search engines), and being accessible to devices besides computers such as screen readers and PDA’s. To learn more about CSS-P, I recommend the following two articles: CSS Positioning and HTML Utopia — Designing Without Tables.

People often like to brag that they “hand code in notepad”, as if it makes them a better developer somehow. But there are other options for hand coders. I recommend using the free Crimson Editor or some other nice text editor. It has syntax highlighting (a.k.a. color-coding) and can open many files at once, as well as some other neat things. It’s designed to help developers write code (but not just html). It does not, however, fill in tags or attributes for you.

Advantages of Learning to Hand Code

Once you’ve invested the time to learn to hand code proficiently, you’ll enjoy some cool options and freedoms that those who are restricted to editors don’t.

Time and Control

Once you can hand code confidently and proficiently, creating a new layout will take less time than it would if you used an editor. Controlling extremely small details, and getting the layout to look just right becomes much easier.

Working with Server Side Code

Working with any server side language becomes much easier. If you had very limited knowledge of html, it would become extremely difficult — if not impossible — to work with PHP or ASP. Again, the better you are with html, the easier things become. I actually look forward to the opportunity to write some good ol’ tables when I’m working with PHP! It is also worth mentioning that there are currently no editors for Linux, so should you ever be in a situation where you needed to use a Linux machine to write some code, you’d have to do it by hand.

Layout Maintenance and Updates

When you need to make changes to the layout of the site, it’s very easy if you’re familiar with its code, and this can save time, and provide you more control over the change you’re making (without messing up anything else).

Editors have their place, and they are good at what they do. I’ve used Dreamweaver a lot, and I even teach it, but in the end, if the developer makes the decision not to use it, he or she will be much better off. Knowing HTML makes many things that could otherwise be a real hassle, a real cinch. I’m glad I spent the hours I did learning to hand-code, instead of using an editor.

What do you think? Don’t miss the opposition’s arguments — they might just change your opinion on the hand coding controversy…