Know the code: 5 quick tips to clean up your HTML (or why WYSIWYG tools are bad!)

Though I’m a writer/editor/consultant by trade, I’ve been coding HTML since I launched my first site in the mid-’90s. Back then, you had to know the code, which was constantly evolving. I still remember how cool it was when Netscape added background images (I think it was v0.91b).

Nowadays, most people use tools that take care of all that pesky HTML for them. Only problem is that, despite a decade plus of evolution, these WYSIWYG (What You See Is What You Get) editors still don’t do a very good job. Working as I do with a number of organizations, it surprises me sometimes how little HTML some of the people who work daily on the Web know – and it shows in the lack of control they have when creating even simple layouts. When I look at the underlying code, it’s often a sloppy mess that reveals a telltale trail of many failed attempts to add a simple line break or modify a font.

If you want good results, you still need to know the code. Here are some tips to gain greater control over your Web-based content:

  1. Never paste directly from word processing documents into a WYSIWYG editor. Your resulting code will be a nightmare that’s nearly impossible to read and modify. I believe many folks’ fear of HTML stems from having once looked at this type of intensive machine-built code! Instead, paste first into a plain text editor such as Notepad to clear the formatting (while you’re at it, search and replace any curly quotes, non-straight apostrophes, long dashes and compressed ellipses with their standard equivalents). Finally, cut and paste the raw text into your page editor and then add any formatting you need either using the WYSIWYG tools or, if you’re brave, directly with an HTML editor.
  2. Review your code. Most WYSIWYG tools add unnecesary HTML. They may introduce incorrect font tags, add non-breaking spaces ( ) that can affect layout and create unhelpful ALT text (used to describe the content of an image). Learn your way around and fix any errors before they are published.
  3. Learn some easy HTML. You don’t need to master stylesheets and scripting to build in HTML. Start with the basics: STRONG (bold), EM (italics), FONT (to control font selection, size and color), BR (line break), P (paragraph), A (anchor, which is how you make links) and IMG (for adding images). You’ll work your way up to master coder in no time. Note that this will NOT make you a professional developer; HTML is a simple markup language and NOT the same as writing software. But it’s a start, and can be a valuable job skill. More skills = more opportunities.
  4. Use WYSIWYG strategically. Fancy HTML editors often provide good tools for complex tasks, such as table creation. You can build your table layout using a WYSIWYG editor and then switch to HTML to fine tune it, as needed.
  5. Re-use, re-use, re-use. Once you have a piece of code that works, recycle elements of it. Save your favorite code snippets someplace handy (I use OneNote, but Notepad is fine too). And if you’re creating pages or HTML e-mails that are part of the same campaign and really need to be consistent, you should re-use the code (changing out images, links and copy where needed) rather than rebuild it from scratch. Otherwise, you’ll end up with a muddled mess that delivers a sloppy customer experience.

Comments are closed.