What Is An HTML Editor?
This page provides an explanation of HTML editors and discusses the features that make them different to a normal text editor. There's also an overview of WYSIWYG editors, which are included in some of the better HTML editors.
So anyway, what is an HTML Editor?
An HTML editor is a specialized piece of software that assists in the creation of HTML code. Similar to text editors such as Notepad and TextEdit, HTML editors allow users to enter raw text.
Most (if not all) professional web developers use an HTML editor to create and maintain their websites. This is because a good HTML editor can boost productivity enormously.
This online editor is an example of an HTML editor.
HTML Editor vs Text Editor
The main difference between an HTML editor and a simple text editor, is that the HTML editor has more functionality - functionality that assists in creating web pages quickly and easily.
While it's true that you can code HTML using a basic text editor, an HTML editor will make your life much easier. For example, an HTML editor will detect when you write an opening HTML tag, so it will automatically insert the closing tag for you, thus reducing the amount of typing required.
Some HTML editors are a "WYSIWYG editor", allowing you to edit in WYSIWYG mode. This can make it extremely easy to create a website.
What is a WYSIWYG Editor?
Perhaps the question should be "What is an HTML editor with WYSIWYG mode?". WYSIWYG stands for "What You See Is What You Get". When an HTML editor is in WYSIWYG mode, the HTML page is rendered as though it is being viewed with a web browser. The only difference is that, the web developer can edit the page at the same time.
Most WYSIWYG editors allow the developer to move page elements by "clicking and dragging" them around the page. Formatting text with a WYSIWYG editor is a simple as highlighting the text, then clicking the "Bold" button (or whichever button you need). Just like in a wordprocessing program like Microsoft Word, or a desktop publishing application, such as QuarkXpress. which allows you to see what the page will look like while you're editing it. It's kind of like editing a preview of your web page.
Although usually referred to as "WYSIWYG editors", these are better described as an HTML editor with WYSIWYG mode. The user can switch between "Code view" and "WYSIWYG view".
HTML Editors - Features
Like any software, different HTML editors have different features. However, there are some features that are inherent in most HTML editors. For example, one would expect that even the most basic of HTML editors would include the "autocomplete" feature (where the editor automatically inserts closing tags, double quotes for attributes etc).
Here are some of the more common features seen in HTML editors:
- HTML and CSS autocomplete. Sometimes called "code completion", the autocomplete feature detects when you begin to type HTML or CSS. It will then automatically insert the rest of the HTML/CSS code for you (for example, closing tags).
- HTML entities library. This feature allows you to insert HTML entities with a click of the mouse. (What are HTML entities?)
- Site Explorer. This feature allows you to navigate the files in your website using a hierarchical menu (similar to Windows Explorer).
- Built in FTP client. Some HTML editors enable you to FTP to your web server straight from the HTML editor. In other words, you can publish your changes without having to fire up a separate FTP client. This makes publishing much quicker and easier.
- Search and Replace. Most HTML editors have a search and replace of some kind. Some of the better ones will have advanced features, such as being able to search through a whole website project and searching only certain file types (eg, only files with an .html extension).
- Split-Screen View. This is where you can set up the screen to show half code, half preview.
These are only some of the many features that you're likely to encounter when searching for an HTML editor. Some features can really make your life much easier, so it's often better to pay a bit extra and get a full-featured editor.
Example HTML Editors
Online Editors
Here's an example of an online HTML editor that has been embedded right into this website.
And here's another example of an online editor.
Both of these options enable you to create web pages via your browser, then copy/paste the code to your own project.
Downloadable Editors
KompoZer, CoffeeCup, and HTML-Kit are well known HTML editors that include HTML and CSS support, split screen view, HTML entities library, built-in FTP client and more. These need to be downloaded to your desktop before you can use them.
Advanced HTML Editors
If you intend to code using more than just HTML and CSS, you may find a basic HTML editor very limiting. That's because, many basic editors don't support scripting languages such as JavaScript, PHP and ColdFusion.
Most web developers use more than just HTML and CSS and it can become laborious having to switch between different editors for different languages.
That's why more advanced HTML editors like VS Code are so popular with professional web developers. These types of editors provide an Integrated Development Environment (IDE) for building multiple large scale web applications.