Review and Comparison of Free HTML Editors

First Impressions - Review and Comparison of Free HTML Editors

by Larry Neal Gowdy - Updated October 6, 2013)



(This article was originally published on TheLogics.org blog. I have updated the article for First Impressions and included an additional editor which is likely the best free HTML editor available.)

When I first began building websites in 1999 I tried several of the free online WYSIWYG visual editors. It did not take long for me to realize that a person could easily spend months and years building a ‘free’ website and yet the site would still be slow to load, be terribly buggy, and be more than a little amateurish. I gave myself no other choice but to give in to the necessity of learning HTML.

First Impressions - Screen shot of AceHTML 6 Pro

AceHTML 6 Pro

AceHTML

By 2005 I was using version 4 of Visicom Media’s® AceHTML® editor. Although I continued experimenting with other editors, the paid version of AceHTML Pro 6 became my favorite.

The following screenshots show a dark gray skin color that is the result of my tinkering with the color schemes in Windows® XP® to improve viewing in Word® and Excel®. The change of colors has created some interesting results that I will write about in a different article. Meanwhile, just know that the colors in the following graphics are not what is normally found in the programs.

AceHTML is an excellent editor that has many useful features for individuals new to HTML. Perhaps the features that I like best are the ability to have several files readily available in tabs, the preview screen, a spell checker, automatic image coding, and the one thing that I want most, the ability to format the font size and colors on the code display. Microsoft® NotePad® is plenty good enough for typing HTML - and many programmers use NotePad exclusively - but coloring different code is a feature that NotePad does not have, and so I prefer to use a dedicated HTML editor.

The early versions of AceHTML were stable and generally did everything I wanted. Until recently I kept copies on my hard drive just in case someday I might want to use one of the old versions again. Beginning in version 5 there was a change of cursor behavior: the cursor would no longer automatically return to the same column on a new sentence when scrolling the cursor up or down with the arrow keys. There was also a problem with the program crashing when closing a file while other files remained open - usually after I had spent over a hour on a file - causing me to lose my work. I solved the second problem by frequently hitting ctrl-s to save files to disk, which is not a bad habit to acquire. Too, the cursor speed was often agonizingly slow: it would take a good ten to fifteen seconds or more to scroll the cursor from one end of a sentence to the other. Since there were times that the cursor speed was speedy, I suspect that the problem may have been due to a conflict between AceHTML and other programs running on my computer.

First Impressions - Screen shot of AceHTML 4

AceHTML 4

An oddity among several of the newer editors is a problem with word wrapping. In all known word processors, when typing and nearing the right end of a sentence the cursor will automatically progress to the next line below the current line of text. However, in both AceHTML and CoffeeCup® the screens jump to the left about an inch during the last few letters of a sentence, and then the screen jumps back to the right when a new line is started. The jumping screen behavior can cause the user to lose place, it is hard on the eyes for the screen to jerk back and forth, and it is more than a little annoying when the user must type in long documents.

The jumping screen problem can be eliminated if the right margin is set to about two to three inches of width, but then a sizable percentage of screen is not usable. Too, for those of us who use two or more monitors for coding, the right margin has to be manually resized every time we drag the program onto a smaller monitor.

Generally, if you frequently use a word processor then you will be accustomed to normal word processor behavior and you will likely not be pleased with the behavior of many HTML editors.

For this article I installed AceHTML version 4 just for the fun of it, and though I was very pleased with the speed and behavior of the cursor, there was a problem with the word wrap setting changing by itself. Several of the editor’s settings repeatedly changed on their own, and since I do not have time to tinker endlessly with programs, I closed the program. Over all, however, I still view AceHTML 4 as the best AceHTML version even though its visual appearance is not as good as the later versions.

First Impressions - Screen shot of CoffeeCup

CoffeeCup

CoffeeCup

The CoffeeCup (CC) HTML editor is similar to AceHTML with the same margin and cursor problems, but CC never crashed too badly on me. (In fairness, AceHTML had not crashed on me in years since I began saving frequently, and I saved frequently in CoffeeCup too.) CoffeeCup’s main advantages are its skin design and one-click W3C HTML validation. The normal routine in most editors is to open a browser, go into the W3C validation site, enter in the file or URL to be checked, and then wait for validation. With CoffeeCup you merely click on a button and the validation process is automatic. Quite a nice time saver! You still have to go the long route to validate CSS, however, and so although I very much like the one-click validation for HTML, in the long-run it does not save much time unless you are validating the same file several times while removing coding errors.

First Impressions - HTML validator in FireFox

HTML validator in FireFox

HTML Validation in FireFox

An interesting and very useful add-on for FireFox® is the HTML Validation extension by Marc Gueury. With the add-on installed, in the lower right hand corner of the browser there is shown how many HTML errors a website might have. A red icon indicates errors, and a green icon indicates no errors. Clicking on the results gives a pop-up of the web page’s code and where the errors exist. Once you have a file loaded into FireFox, its HTML gets checked each time you refresh the screen. So if you have a file displayed in a FireFox browser while writing code, then the one-click validation in CoffeeCup is not so important anymore. It is important to test the completed file with W3C before uploading to your server, but so far Marc’s tool has not shown to have any bugs. You can view Marc’s site at http://users.skynet.be/mgueury/mozilla/. I am hoping that Marc will soon create an add-on that checks for CSS validation as well.

Script Editor

The Microsoft® Script Editor® (SE) is included as a separate program in Microsoft Office®. I am unsure of which versions of Office that Script Editor is available, but from what little I have read, SE is available in Office 2000 through 2003 plus Microsoft SharePoint Designer 2007®. I found the program in my hard drive’s Office 11 folder under the file name of MSE.exe. I had tinkered with SE for a few minutes years back, but I got busy with other projects and I did not have time to sit down and give the program a good test until much later.

First Impressions - Screen shot of Script Editor

Script Editor

Script Editor is a dream come true for a programmer who wants a minimalist editor but who also wants speed, dependability, text display, and a similar Office skin. Cursor speed, cursor behavior, and word wrap appear to be the same as Word’s. A nifty tab command hides HTML while showing script only. Since the program was designed primarily for developers, there is no spell checker, and the ‘view in browser’ command only works with Internet Explorer®. When attempting to view a file in a browser other than IE, if the file’s location is c:\websites\index.html, the browser will pop up two tabs, one that attempts to find websites.com, and the other tab simply makes no connection. It isn’t difficult to open the desired file within any browser, but the ‘view in browser’ command within SE appears to not be designed to work similarly as common HTML editors.

Although I would much prefer to be able to do a quick spell check while in the Script Editor, it has been my experience that most spell checkers in HTML editors are not as accurate nor as fast as the spell checker in Word. While using Script Editor I copy/paste the browser’s displayed text into a Word document for spell checking, and while it will be an extra two steps to complete a project, I suspect that the actual time used is similar and that the results of the spell checking are better than non-Microsoft programs.

The Microsoft Web Platform Installer® (WPI) can be used for installing WordPress®, Joomla®, and other content management systems (CMS) on Windows, and WPI will automatically install Internet Information Services®, SQL Server Express®, .NET Framework®, and Visual Web Developer® to work with CMS. The Microsoft editor provided in the setup is rather blah with an old-school skin, and I was never able to spend more than a few minutes in the editor before I opted to use a different editor. Script Editor, however, meets all of my primary needs for speed and appearance.

(A note about installing WordPress, Joomla, or Drupal® on Windows XP: I had good luck with the XAMPP installation, it was fast and worked well, but the Web Platform setup was hours long and seriously crashed my computer twice before I uninstalled it. I believe that the problem was likely with the installer having installed Net Framework 4 twice; the problem stopped when I removed one of the installations. I will reinstall Web Platform later, but for now I have temporarily gone back to testing CMS changes on the online host’s server.)

First Impressions - Screen shot of OpenOffice/Libre Writer/Web

OpenOffice/Libre Writer/Web

OpenOffice/Libre

OpenOffice.org® and Libre® also have their version of a script editor, which appears to work well, but it too does not have a spell checker, and apparently does not have word wrap either. The Libre Writer/Web’s “display in browser” command worked well for FireFox, but I did not further test to see if other browsers worked as well.

Visual Web Developer 2010 Express

Microsoft’s Visual Web Developer 2010 Express® (VWD) is a free download, and I am more than a little upset with myself for not having previously known that the editor existed.

When Googling for HTML editors the normal results only show CoffeeCup and several other Windows® and Linux® editors that are primarily intended for visual WYSIWYG editing, not code editing. I have no interest whatsoever in visual editors, and so naturally I did not find a sizable interest in the search engine results. Until recently, and based on search engine results, to my knowledge the only really good HTML/CSS editors in existence were Script Editor and Expression®.

Visual Web Developer is quite good! I feel comfortably at home with the menu layout being similar to Microsoft Office 2003. I have used the editor less than two hours, and so I am not familiar with its full potential, but first impressions states that VWD is as good or better than any other known free HTML editor.

First Impressions - Screen shot of Visual Web Developer 2010 Express

Visual Web Developer 2010 Express

VWD has automatic HTML validation for Internet Explorer® 6, HTML 4.01 transitional, XHTML 1.0 frameset, transitional, and 1.1. I do not yet know how accurate the validation is, but it did spot a misspelled tag that AceHTML, CoffeeCup, and I had not previously noticed in a test file.

The first differences noticed in VWD is that there is no spell checker (spell check is only available in the paid version), the cursor speed is similar to NotePad (not bad but not as fast as Word, Script Editor, and Expression), and I have not yet found an ‘insert image’ command. I did discover, however, that while in the design editor you can very easily drag a photo from Microsoft Office Picture Manager® into VWD, and the visual editor does a good job of inserting the photo and writing accurate code. Automatically adding image code into Script Editor can be accomplished with the same method.

Shift+ctrl+W displays a file in IE, and an interesting option is to have Internet Explorer open as a tab within VWD. In a lot of ways VWD feels like a browser itself with tabs and Internet access, and having now said that, I would not be surprised to learn that VWD is based on the Internet Explorer programming, which would explain the over all feel and slightly slower cursor speed.

Just for fun I tinkered a little more with the visual editor to see how well VWD rewrote the code when a web page is modified. I am a newbie to modern visual editors, but I was somewhat impressed that VWD was able to easily change a text box layout and write accurate CSS as well. I continue to not trust WYSIWYG editors due to most visual editors in the past having made a terrible mess of HTML/CSS, but it appears that the newer visual editors might now be capable of creating accurate code.

Visual Web Developer 2010 Express can be downloaded with several other free Express tools including Visual Basic, Visual C++, and Visual C#. To my knowledge VWD is the best free editor available for HTML/CSS coding, and it may very well be quite excellent for visual editing as well.

VWD may require additional software like ASP.NET to be installed. The additional software is also free to use, but the over all installation size will likely be larger than most of the more common HTML editors. The VWD exe file is 591kb, AceHTML is 9,290kb, and CoffeeCup is 15,951kb, but VWD takes a little longer to load which suggests that additional support files are required. Most of us, however, would never notice the memory use difference between VWD and other programs.


HTML Comparisons


Primary advantages of AceHTML over other editors:
Keyboard shortcuts: F11 preview, F12 editing view, ctrl-F9 code check, F6 spell check.
Different skins to match the user’s Windows theme (like Office 2003).

Primary advantages of CoffeeCup over other editors:
One-click W3C HTML validation.
Attractive skin design.

Primary advantages of Script Editor over other editors:
Cursor speed is as fast as a word processor’s.
Word wrap is flawless.
File save speed is almost instant.
The skin is the same as the user’s Word, Excel, etc..
Stable.
Easily replace upper case letters with lower case.
An excellent editor for individuals who are familiar with code.

Primary Advantages of Visual Web Developer 2010 Express over other editors:
Menu and skin layout are almost identical to Office 2003.
Word wrap is excellent.
HTML validation while you type (similar to spell check while you write).
Modern appearances within a browser-like environment.
HTML/CSS code appears to be correct when using the visual editor.

Primary disadvantages of AceHTML:
Requires frequent saving of files to prevent crashing.
Word wrapping is not ideal.
Cursor speed is often very slow.
Code check is useful but not accurate as per W3C standards.

Primary disadvantages of CoffeeCup:
5-8 second delay when saving files (the free and paid versions appear to have the same delay; the file itself is saved quickly but the program oddly becomes unavailable for several seconds afterwards).
Fewer keyboard shortcuts.
Word wrapping is not ideal.
Cursor speed and behavior is less than ideal.

Primary disadvantages of Script Editor:
No automatic insertion of image coding (but can have a photo dragged into the visual editor and have the visual editor automatically insert the code).
No spell checker.
Only available as a component of Microsoft Office and SharePoint Designer 2007.
Only uses IE for one-click browser display of HTML (the oddity may possibly be in the browsers and not in Script Editor, but probably not).

Primary Disadvantages of Visual Web Developer 2010 Express:
No automatic insertion of image coding (but can have a photo dragged into the visual editor and have the visual editor automatically insert the code).
No spell checker.

First Impressions - HTML editor comparison chart

HTML editor comparison chart

The popularity of visual editors appears to be increasing while interest in true HTML editors is decreasing. Grab a copy of AceHTML, CoffeeCup and Visual Web Design 2010 Express; even if you do not need them now, years into the future you might.

Big name companies like Adobe® and Microsoft are producing editors that are primarily aimed for individuals who do not know HTML nor any other code. For those of us who prefer to type code ourselves, relatively few quality editors are available. At present, the very best HTML editor known to me is Expression Web 4 Professional which is remarkably ideal for my needs.

(Update October 6, 2013: More information about HTML editors is available in other First Impression articles. Expression Web 4 is now available as a free download, as is NotePad++ and Visual Studio Web 2012 and 2013, all three of which make all but the most expensive editors look pale in comparison.)




Unless otherwise stated, all content and graphics are Copyright©2011-2013 by Larry Neal Gowdy.
No content nor graphic may be copied or reused without written permission.