Skip to content

WYSIWYG (What You See Is What You Get) Means What?

In general, the WYSIWYG code editors have become much better recently. With some of them if not all even producing valid and elegant code. Eventually, when it comes to coding editors, it’s damn hard to get a clear overview of all the benefits and functionalities different editors have to offer.

These applications typically used an arbitrary markup language to define the codes/tags. Each program had its own special way to format a document, and it was a difficult and time-consuming process to change from a one-word processor to another.


The use of markup tags and codes remains popular today in some applications due to their ability to store complex formatting information.

After all, sometimes you need to provide your clients with some simple tools to edit or update the websites like the Gutenberg (new WordPress Block Editor). And this is where the utilities of WYSIWYG editors come in.

As a web-professional, you need to provide your clients with some sophisticated advice and offer a simple yet effective tool — e.g. a WYSIWYG-editor.

What is the Meaning of WYSIWYG?

WYSIWYG (pronounced “WIZ-zee-wig”) is a short form of “What You See Is What You Get.” A WYSIWYG application is one that enables you to see on the display screen exactly what will appear when the document is printed.

This differs, for example, from word processors that are incapable of displaying different fonts and graphics on the display screen even though the formatting codes have been inserted into the file.

This differs, for example, from word processors that are incapable of displaying different fonts and graphics on the display screen even though the formatting codes have been inserted into the file. In other words, WYSIWYG is an acronym for “What You See Is What You Get.” WYSIWYG is especially popular for desktop publishing.

Basically, a WYSIWYG Editor can be contrasted with more traditional editors that require the developer to enter descriptive codes (or markup ). And often, do not permit an immediate way to see the results of the markup.

General User-based Experience

WYSIWYG implies a user interface that allows the user to view something very similar to the end result—while the document is being created.

In general, WYSIWYG implies the ability to directly manipulate the layout of a document. Without having to type or remember names of layout commands.

The actual meaning depends on the user’s perspective, e.g.
  • In presentation programscompound documents, and web pages, WYSIWYG means the display precisely represents the appearance of the page displayed to the end-user. But, it does not necessarily reflect how the page will be printed. Unless the printer is specifically matched to the editing program, as it was with the Xerox Star and early versions of the Apple Macintosh.
  • As in word processing and desktop publishing applications, WYSIWYG means that the display simulates the appearance. Representing the effect of fonts and line breaks on the final pagination. In particular, using a specific printer configuration, so that, for example, a citation on page 1 of a 500-page document can accurately refer to a reference several pages later.
  • WYSIWYG also describes ways to manipulate 3D models in stereo-chemistrycomputer-aided design, and 3D computer graphics.

WYSIWYG editors have the advantage that users do not need to have any knowledge of programming or markup languages ​​to create a web document.

The formatting instructions are located in the background of the program, for example in Microsoft Word. Because you see immediately what you changed in the document. But, you don’t see the program instructions in the form of the source code.

What is an Example of WYSIWYG editor?

As an example, the first true WYSIWYG editor was a word processing program called Bravo. As invented by Charles Simonyi at the Xerox Palo Alto Research Center in the 1970s.

It became the basis for Simonyi’s work at Microsoft. Evolving into two other WYSIWYG applications called Word and Excel. Below is an example illustration of a Word Processed Document by jmexclusives.

WYSIWYG editor

So, an HTML WYSIWYG editor, such as the Microsoft FrontPage or Adobe’s PageMill conceals the markup. Allowing the Web page developer to think entirely in terms of how the content should appear.

One of the trade-offs, however, is that an HTML WYSIWYG editor sometimes inserts the markup code on its own. Then, the developer has to know enough about the markup language. And also to go back into the source code and clean it up.

Using the WYSIWYG editor

Important to realize, the WYSIWYG principles are used not only for editors but also for Content Management Systems (CMS) such as WordPress, TYPO3 or Drupal. This allows editors to easily edit the content of Websites without much effort and without having to learn certain programming or markup language.

Equally important, especially in the SEO area, you want to create source code that search engines can understand. However, some elements of the code should be excluded from the Indexing. And, if necessary, the search engine should be prevented from Reading and Crawling it.

But, WYSIWYG editors rarely offer such options. That is why usually HTML editors are used in the SEO Marketing area, which allows you to edit individual areas of the source code specifically.

Finally, WYSIWYG editors are also used for JavaScript or other programming and markup languages.

Content Optimization in Modern Days

In reality, modern software does a good job of optimizing the screen display for a particular type of output. For example, a word processor is optimized for output to a typical printer.

Whereby, the software often emulates the resolution of the printer in order to get as close as possible to WYSIWYG. However, that is not the main attraction of WYSIWYG. So to say, which is the ability of the user to be able to visualize what they are producing.

SEO Tools Google New Rules

In many situations, the subtle differences between what the user sees and what the user gets are unimportant. In fact, applications may offer multiple WYSIWYG modes with different levels of “realism.”

Examples of Multiple Modes include;
  • Composition mode: In which the user sees something somewhat similar to the end result, but which employs an interface more conducive to composing than the layout itself (e.g., the inclusion of section breaks and non-printing characters).
  • Layout mode: In which the user sees something very similar to the end result. But, which includes some additional information to facilitate proper alignment and spacing (e.g., margin lines).
  • Preview mode: In which the application attempts to produce an output that is as close to the final result as possible.

Before the adoption of WYSIWYG techniques, text appeared in editors using the system standard typeface and style with little indication of the layout (marginsspacing, etc.).

In this environment, there was very little distinction between text editors and word processors. Learn more about 20 Useful WYSIWYG Editors Reviewed.

The Pros & Cons you Should know

If, for example, an HTML document is edited, it may occur that it is represented differently in different browsers. Simply, because the user leaves writing the source code to the program. This way, code lines may creep in which were not intended at all.

Secondly, a line break in the WYSIWYG editor can look completely different as compared to a conventional HTML editor. If an error occurs in the program code, it will be relatively difficult to find it in the WYSIWYG editor. Of course, since you don’t have access to the source code. But, only see what the user of the program or code part will see later.

Again, there is also no distinction between content and markup. In that case, because WYSIWYG editors directly apply formatting instructions to some content directly. And which is sometimes contrary to good style when creating web pages. Good style dictates making the markup in a separate file, for example, using a CSS file.

In addition, WYSIWYG editors often generate superfluous code, which in part does not meet the requirements of the World Wide Web Consortium (W3C) and is therefore not necessarily valid.


As you can see, they are two completely different editors for creating content in WordPress. Namely, the Block Editor (Gutenberg) and the WordPress Classic Editor. Then again, the old classic editor was a text editor with formatting buttons very similar to Microsoft Word.

Uniquely, the new Block Editor (Gutenberg) uses a totally different approach, called ‘Blocks’ (hence, the name Block Editor). Identically, blocks are content elements that you add to the edit screen to create content layouts.

In the light of each item, you add to your post or page is a block. As an example, you can add blocks for each paragraph, images, videos, galleries, audio, lists, and more. There are blocks for all common content elements and more can be added by WordPress plugins.


I hope the above-revised guide was helpful towards your best website editing strategy.

However, if you’ll have additional Contributions, Suggestions, Support Guides, Personal Experiences or even further Questions, please Contact Us.

Furthermore, your Generous Donations will be highly appreciated. In regards to this topic, consider the links provided below as useful and related too.

  1. Email Marketing Masters Guide
  2. How does Mobile Marketing work?
  3. What is Search Engine Marketing?
  4. What is Search Engine Optimization?
  5. The Best Practices for Online Digital Marketing?

NB: Any interested blogger can now join our Posting Program for free. While content marketers should Mail Us Direct so as to Advertise through Banner Ads starting at $75, Blog Posts at $55, DF Links at $35, or just Consult Us to ask for our help.

NB: Below are Featured Service Gigs from topmost Best Solution Freelancers that you can bid from: