Dawn At Your Service’s Blog

WYSIWYG Editors and Basic HTML

I’m creating this post to help my clients, both current and future, who are interested in managing their own websites after I design them. Of course if this information is helpful to anyone else, that’s fantastic.

The applications I use to build websites are content management systems. I use CMS Made Simple, Joomla or WordPress. I haven’t decided yet which one I like best. Most people find WordPress to be the easiest to manage by themselves, but rumor has it that Joomla has the most sustainability and functionality.

All three systems that I use have WYSIWYG editors. According to Wikipedia, WYSIWYG (pronounced /ˈwɪziwɪɡ/[1]), is an acronym for What You See Is What You Get, used in computing to describe a system in which content displayed during editing appears very similar to the final output,[2] which might be a printed document, web page, slide presentation or even the lighting for a theatrical event.”

In English, it’s an editor that translates text and images into code so it can be displayed in a browser, and apparently other things. WYSIWYG editors have been a huge development for designers because it reduces almost all hard coding. Notice the word “almost”. Just like the definition above states, “appears very similar”. WYSIWYG editors are NOT error proof and things don’t always display the way they do in your editing screen. Hopefully these basic codes and tips can help editing a website and/or blog pages a little less painful.

Some Basic codes:

Most codes have a beginning and an end. The bolded print is the code. The italic text displayed between is used as an example and would be replaced with your own text.


<p>Place the text for your paragraph between these codes. Start a new segment for each paragraph.</p>


<b>Place bold text here</b>
or, and I don’t know why
<strong>Place bold text here</strong>

I use trial and error here. If one doesn’t work, try the other.


<em>Place italic text here.</em>

Insert an image-

<img src=”full path to the file you want to insert“>
*generally if you click on the image where it is uploaded such as file manager or media gallery, it will display in another browser window. You can copy and paste the entire file name in between the parathesis and it SHOULD work.

Insert a hyperlink/url-

<a href=”url to the page you want to link“>what you actually want displayed</a>


Spacing can be a very tricky thing with WYSIWYG editors. Sometimes there’s too much space and sometimes there’s not enough.

To add a space, try <br> which is called a break tag and does not need an end tag. If that doesn’t work, try adding a paragraph with non-breaking space <p>&nbsp;</p> Hopefully one of those will do the trick.

Removing space is often necessary when you use the enter button. The WYSIWYG editor adds in a blank paragraph that looks like this: <p></p> with no text in it other than maybe some formatting. Or there will just be a blank space. Either way, you have to delete it.

VERY IMPORTANT-All editing using HTML codes must be done from the HTML editor. They won’t work using the WYSIWYG. It will display exactly like it does here in this post. If you have trouble locating your HTML editor in any of the programs I mentioned above, just ask and I’ll direct you towards them.

The bolded coding is just to help you identify what is the actual code. When using code, it is not bolded.

Never copy and paste a Word document into a WYSIWYG editor. Microsoft automatically places hideen code in their text and it will show through or the text will not display properly unless you stick it into a Word clipboard (which most WYSIWYG editors have), or copy and paste it into notepad and THEN into your WYSIWYG editor.

Lastly, I highly recommend ALWAYS copying and pasting the original HTML code (what you see when you switch from the WYSIWYG to the HTML editor into notepad before you do any tampering in unfamiliar territory. Trust me on this…I’ve made that mistake! You don’t want to take the chance of losing all of your original, already formatted content!

July 6, 2009 - Posted by | Business Operations, How To

1 Comment »

  1. Dawn,

    Thanks for your blog post. It was very helpful in steering me in the right direction.

    Comment by Mike Weiland | October 21, 2009 | Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: