UPDATE: Emphasis added in the introduction to help explain that I do not think that WYSIWYG editors are entirely bad. I just think that it is better to edit the code if you’re working with the design of a website. The content is often containing of more simpler HTML, and some of the points below don’t apply as much or at all when editing the content.

Introduction

Are you using a WYSIWYG editor for HTML? Please help the rest of the Internet and stop doing so. You are shooting yourself in the foot and preventing yourself from writing more advanced HTML code. Now, before I continue, I must say that I don’t mind all WYSIWYG editors. I have a fondness for web editors, like Google Docs and FCKEditor, though the latter takes forever to load. WYSIWYG editors are good for writing blog posts or documents in Google Docs. They are also good in OpenOffice. A place where WYSIWYG editors are not good are where you could be dealing with more complex HTML. If you’re making the design of a site in a WYSIWYG editor, you’re doing something wrong. I’m here to warn you, or you’ll still be wrong.

Why WYSIWYG editors are bad for web design

1) They often create table-based layouts Table based layouts are more verbose than CSS based layouts. They are also harder to maintain and get really difficult for you to make browsers render properly if you have gotten to the point of nested tables.

2) if they use CSS, there is a good chance that it is going to be inline CSS

Inline CSS is where you have style declarations within the tag. An example is below.

<div style=”margin-left:3em;”>This is a tag. Technically, the tag contents.</div>

Now, a little bit of inline CSS here and there is fine. When you have something like below:

<div style=”margin-left:3em; font-weight:bold; background-color:#CCC; color:#000″>This is a tag. Technically, the tag contents</div> This is normal content. <div style=”margin-left:3em; font-weight:bold; background-color:#CCC; color:#000″>Some special content goes here</div> This is more normal content <div style=”margin-left:3em; font-weight:bold; background-color:#CCC; color:#000″>This is a third tag</div>

You have a bunch of tags that have the same style attribute containing the same long CSS styles. You could shorten it into:

<div class=”content”>This is a tag. Technically, the tag contents</div> This is normal content. <div class=”content”>Some special content goes here</div> This is more normal content <div class=”content”>This is a third tag</div>

Now, you need two more things. You need the external CSS file and the link tag at the top of all the webpages that you want the CSS file to apply to. However, using an external CSS file means that it is easier to change the styles on multiple webpages. Keep in mind that using an external CSS file will slow down the loading the first time a person visits the page. However, all other pages with that CSS file will load faster as the file will be cached and there will be no need for more HTTP requests.

3) A lot of unnecessary markup is added

Sometimes, when you add and remove things in a WYSIWYG editor, you end up with HTML code littered with useless tags. Below is an example.

<b> </b>

Things like that, you would have to go back to the HTML code and edit out to keep the code clean and the file size as small as it can be. Some newer editors are getting smarter and removing things like those, but you still want to avoid WYSIWYG editors for web design, as your design might get littered with a bunch of useless stuff.

4) They often modify other markup

Nearly all good WYSIWYG editors have an option where you can edit the HTML. Now, when you switch back to the WYSIWYG mode, some of the HTML is transformed into something else. <b> tags are often turned into <strong> tags. The example I just mentioned is pretty basic, but sometimes, more dramatic changes can happen in the code. This can make it more difficult to write your own HTML in a WYSIWYG editor.

5) You don’t learn You’re less likely to learn

UPDATE: Many people have pointed out that this reason isn’t 100% true.

If you start out using a WYSIWYG editor, you’ll keep using a WYSIWYG editor. Over time, more unnecessary markup as mentioned in the previous reason starts piling up in your code. If you start out writing raw HTML, you’ll keep the good habit, and only use WYSIWYG in situations where it isn’t so bad. Now, if you start out with WYSIWYG, but have the will to move to HTML, you’ll find that a lot of your existing HTML is harder to edit when you edit it directly. This either gives you a headache, or forces you back to WYSIWYG for editing your old HTML.