In this age of startups and tech innovations, there are a million reasons to build your own website, and there seems to be a million tools out there to help you do it.
From selling a product you’ve invented, to creating a space where people with similar interests can connect, to simply trying your hand at website design, a website is a gateway to potentially connecting with the millions of people.
And whether you’re a tech-savvy web design genius or a beginner, you’ve probably realized the usefulness of having a basic familiarity with HTML.
As one of the most fundamental languages for website creation, you can’t go wrong with a little HTML knowledge in your back pocket. And what if I told you there’s a tool out there that could help take your HTML to the next level… or at least make sure that your code is correct?
Well, buckle up folks, because that tool is an HTML editor. And I’m about to point you in the direction of 14 options for HTML editing tools.
I’ll explain what an HTML editor is, the differences between some of the tools on the market, and give you a brief description of each tool’s capabilities.
What is an HTML editor?
An HTML editor can be a standalone tool, but it’s also often part of a larger integrated development environment (IDE), which is basically a developer’s toolbox that provides a space not only for code editing, but also compiling, interpreting, and debugging code.
An HTML editor, specifically, is a tool that helps you track your code. While you can technically type your code into any word processor, an HTML editor gives you the tools to make sure that your code is written well…or at least written properly.
The most basic capability an HTML editor provides is syntax correction, or a spellcheck tool for code. They also typically offer syntax tracking, which highlights different parts of your code, making it easier to read by separating the different parts line by line. And they usually allow you to insert or autocomplete common HTML elements.
For anyone who’s ever forgotten to close a bracket, that capability alone could be a godsend.
Why should I use an HTML editor?
As someone who writes lots of words every day, I’m always thankful that I have an editor going over my blog posts, making sure everything looks and sounds nice for my readers.
An HTML editor provides the same service and peace of mind. Even a master coder can key in a typo here and there when they’ve been writing code all day. An HTML editor will help you catch errors so you don’t have to go over hundreds of lines of code manually to find where you went wrong.
Plus, although we’re focusing specifically on an editor’s ability to handle HTML, many editors can handle other languages, such as CSS or PHP, giving you more options if you ever want to branch out with your web design skills.
But before I send you looking for the HTML editor of your dreams, you should know that there are two types of HTML editors out there, and they are suited to developers with different levels of experience.
The textual HTML editor
A textual HTML editor shows you your code line by line, exactly how you’ve written it.
This is what your code will look like in a textual HTML editor (image source: Stack Overflow)
Who should use it: More experienced coders, those who want tight control over their code, and those who hate code bloat should look into a textual HTML editor.
The WYSIWYG HTML editor
WYSIWYG stands for “What You See Is What You Get.” That means when you’re designing your webpage in a WYSIWYG editor, you’ll know exactly what it will look like before you upload it or test it. Most of these tools have drag-and-drop design functionality, making them very easy to use.
You can see exactly what your web design will look like in a WYSIWYG editor (image source: Elated)
Who should use it: Less experienced coders and those focused more on design than code might want to check out a WYSIWYG editor before looking into a textual editor.
But are there any free HTML editors?
We can talk about useful coding tools all day. But if you’re just learning how to code or if you’re striking out on your own to start a web design business, you probably don’t have a lot of cash to throw around.
Lucky for you, there are quite a few free and open source HTML editors out there. In fact, I found 14 of them! They’re separated by text and WYSIWYG editors and listed in alphabetical order below, along with a brief description of their capabilities.
Free text HTML editors
Remember, with these editors you’ll probably want to a pretty extensive background in HTML or whichever language you’re coding in. While these editors can help you fix mistakes, they can’t write your code for you.
Image source: Aptana
Image source: Arachnophilia
Image source: Bluefish
Bluefish is an open source code editor that can run on Linux, Mac OS X, FreeBSD, OpenBSD, and Solaris. It supports FTP, SFTP, HTTP, HTTPS, WebDAV, and CIFS protocols. For those with large projects, Bluefish can open over 500 documents simultaneously and will automatically recover changes made in modified documents if your system crashes while you’re editing. It can edit quite a few other languages, including C++, Google Go, Java, Perl, PHP, Python, and R. It was last updated in January 2017.
Image source: CoffeeCup
CoffeeCup offers a free HTML text editor. But if you’re looking for more of a WYSIWYG setup, they also offer a “Visual Editor” for an additional cost. You can use CoffeeCup to create both HTML and CSS files, as well as edit existing website files. Plus, you can update content across pages using their Components Library.
Image source: JavaEE Tips
6. Komodo IDE
Image source: ActiveState
ActiveState’s Komodo IDE has a pared down free version of its system, as well as paid licenses. But its free version still features some robust features, such as auto completion and debugging tools. It can also edit several other languages, including Python, Perl, and Node.js.
Image source: Microsoft
If you’re not boycotting Microsoft like Arachnophlia creator Paul Lutus, then you should check out Microsoft Visual Studio’s free “Community” edition of their IDE, which supports up to five users. While their paid versions offer more advanced features, their free version includes all the essential tools for HTML editing. Plus they throw in some useful tools for mobile app development, such as code sharing between Android and iOS.
Image source: NetBeans
Image source: Wikimedia Commons
Available only for the Windows users out there, Notepad ++ is a free source code editor written in C++. Its UI is completely customizable, and users can decide how syntax is highlighted and folded. Bonus fact: For those trying to go green, Notepad++ is dedicated to reducing carbon emissions by creating programs that run on less CPU power. It was last updated in August 2017.
10. NoteTab Light
Image source: NoteTab
NoteTab is upfront in its product description, warning those that might prefer or lean towards a WYSIWYG editor that this system might not be for them. But if you’re looking for a free, dedicated HTML editor, then you should check out NoteTab. They claim that their minimalist syntax highlight method makes your HTML or CSS code easier to read than in some other editors. And their customizable code snippet keyboard shortcuts cut down on all the time you spend copy-pasting code from one project to another. NoteTab also has “Standard” and “Pro” versions of its product if you’re looking for a more robust feature set.
Image source: PSPad
PSPad is another Windows-only solution. Some of the products on our list aren’t really intended for commercial use (especially those with paid versions), but PSPad is always free and can be used by commercial and government institutions at no charge. The program offers code templates, a spell checker, and auto-correction capabilities. It was last updated in March 2017.
Free WYSIWYG HTML editors
Most of these editors can be used by beginning coders and designers. Some will generate code for you as you drag and drop webpage elements to where they belong on your page. Others will show you the code of your page but let you edit it to your specifications. Your changes will appear onscreen, so you can tweak your design in real time.
Image source: BlueGriffon
BlueGriffon has a few paid versions of their product, but their free version offers the essential tools you’ll need for designing web pages. It’s one of three WYSIWYG editors on our list, and, according to their website, it’s “officially recommended by the French Government as the Web Authoring Tool for the French Administration.” So if you trust French admins’ taste in HTML editors, this is the tool for you!
BlueGriffon offers a dual view of your source code and the WYSIWYG design, so you can track code while also ensuring that your site looks pretty. It can also edit CSS and SVG. Extra features in the paid version of its product include design-oriented features such as a fullscreen editor, an eyedropper for color picking, and word count warnings.
Image source: NetObjects
NetObjects Fusion describes itself as an “HTML generator instead of an HTML editor.” Its drag-and-drop design functionality helps you create a well-designed site exactly as your users will view it. Its free version allows you to create HTML5 websites with photo galleries, forms, and eCommerce functionality.
Image source: SeaMonkey
SeaMonkey is an open source “all-in-one internet application suite” that includes a browser, mail, chat, and web development tools, including an HTML editor. So those only looking for an HTML editor might want to check out another system on our list. But for developers looking for full-on internet experience, SeaMonkey might be worth a try. The project is powered by Mozilla and, thus, uses a lot of the same source code as Firefox and Thunderbird. It was last updated in July 2017.
If you’re looking for an HTML editor, I think I’ve given you quite a few options to consider. Go out there and test drive some of them to see which one best fits your needs. And make sure to let me know how it worked out in the comments below!