If you're looking for a free HTML editor that will help you to a make a website quicker and with less mistakes made, this article should help. I'll cover some of the best HTML editors that are freely available at no cost.
Benefits of an HTML editor
There's no denying that you can make a website using just a text editor like Notepad and it will be just as functional as a site built using a HTML editor. However, HTML editors have a few features that make a much better choice for writing HTML (and other code like PHP or Javascript):
- Code highlighting. A text file is just that – plain text. With an HTML editor you are able to tell the editor which language of code you're writing in (HTML, PHP, Ruby, Javascript etc) and it will highlight the code for you. This makes it much easier to see any mistakes in the code when compared to black and white in a text editor that make it difficult to find errors.
- Auto-completing tags. Sometimes, especially when learning HTML you might forget the name of a tag you need to use. For example, you might want to make something bold by using the
<strong>
tag but can't remember it. Typing just the less than symbol (<) will give you a dropdown list of all the elements so you can easily scan and find what you're looking for. - Error checking. Many free HTML editors have the ability to check your code for any errors that might have been made by mistake, allowing you to fix them. Finding them before making your site live on the web is a much quicker and efficient way to make a website.
- Connecting directly to your hosting. If you already have commercial hosting set up, you can connect your HTML editor to your host using an FTP connection so that whenever you save your file, it is instantly updated on the web. It's a very fast way to publish your website without constantly having to upload via FTP.
WYSIWYG editor or code editor?
There is also a debate over whether it is better for beginners to use a WYSIWYG editor instead of code. WYSIWYG stands for What You See Is What You Get and it allows you to build you web page in a similar way to how you might use Microsoft Word.
With WYSIWYG you can drag and drop, insert images and create numbered or bullet lists using an editor just like in Word. The editor would then take that and create the HTML code for you. There is a huge advantage to this in that beginners do not need to learn how to code an HTML page or remember any tags.
However, there is also an argument that the code these editors create is not as clean or readable by search enginer spiders as code written by hand using an HTML code editor.
From my experience, some WYSIWYG editors work better than others for creating clean code – see the list below for my recommended WYSIWYG editors.
Free HTML editors
Below is a list of some of the more popular free HTML editors available. These are all code-based editors which allow you to build your own pages using HTML code.
- Sublime Text. Sublime Text is a very sophisticated text editor for code and web markup. It has a very easy interface with different color schemes depending on your taste, along with great features like auto-complete elements, code highlighting, split screen mode and a distraction free option which removes all the menus from the editor so you can just write your HTML. It's free to use, but a license for $70 is recommended if you use it long-term.
- CoffeeCup. Another very popular free HTML editor which also comes in a pro version for $49. It has some advanced featured like SiteSpider and Code Cleaner which finds broken links, messy code, and non-compliance to standards. Also, it has built-in FTP to connect to your web server.
- NetBeans. This is a free and open source editor which makes coding your website very quick and easy. It has support for HTML5 and iOS and Android browsers as well so you can make high quality mobile websites as well.
- Aptana Studio. Another open source HTML editor which claims to be the most powerful open source editor available. It provides code assistance for HTML, CSS, JavaScript, PHP, and Ruby – supporting the latest HTML5 specification.
- Notepad++. A very popular editor, which is completely free and open source, that has syntax highlighting as well as syntax folding (so you can hide sections of code to keep things tidy). It also has word and function auto-completion and does have a WYSIWYG interface as well.
- HTML-Kit. This is another HTML editor which has both a free and paid version and it allows you to preview your code as you edit – either inside the editor, or in PCs/Macs, tablets and smart phones. You can also ave time with shortcuts, plugins, code wizards and powerful find/replace options.
- Bluefish. This powerful editor is a lightweight, free, and open source editor with support for multiple languages such as HTML, PHP, Ruby, Python and many more.
Free WYSIWYG editors
If you're not comfortable with HTML code just yet, these WYSIWG editors will allow you to make a web page easily without needing to know any code.
- TinyMCE. This is a very popular web-based HTML WYSIWYG editor used by popular content management systems like WordPress. You can easily add images, links, lists and quotes to your webpage very easily without needing to know any HTML code whatsoever.
- KompoZer. Another great open source project which boasts features like an FTP site manager, a color picker, cleaner HTML code, and a powerful form creator.
- CKEditor. This is a 10 year old, tried and tested free HTML editor with some great features. You can now paste directly from Microsoft Word without breaking any formatting. It also has a very big focus on accessibility – generating websites that can be used by the visually impaired with screen readers and so on. It's also one of the only editors which has inline editing that removes the need for multiple views.
- Aloha Editor. This is a very advanced and powerful HTML5 editor which is also available for WordPress, Drupal and other CMS like Typo3. It also has a front-end editor which you can simply click to begin editing and there is a nifty table tool which lets you add tables just like you would in Microsoft Word.
- Amaya. A free and open source WYSIWYG editor from W3C (who develop the web standards). It is very simple, designed purely for HTML and CSS editing. If you don't need any bells or whistles, this is a good choice.
- SeaMonkey. An all-in-one internet application suite that has dynamic image and table resizing, quick insert and delete of table cells, improved CSS support, and support for positioned layers.
- Trellian WebPage. Provides an intuitive interface with color highlighted HTML and a drag and drop interface that allows you to absolutely position elements on the page. It also has an inbuilt spell checker and supports all major image formats as well.
Which is the best HTML editor?
This question doesn't have an easy answer and many people will have a difference of opinion depending on their preferences. For me, personally, I have used Adobe Dreamweaver for the past 7 years and have found it to be by far the best HTML editor out there.
It isn't free or cheap, but it is by far the best WYSIWYG editor out there, far surpassing any of the free and open source versions. The code view is equally as impressive and the auto-completing of tags alone is very valuable.
It can be used by both beginners and professional webmasters and is a great choice if you want to invest in the best editor possible. I have a series of Dreamweaver tutorials which will help you to find your feed if you decide on this option.
Alternatively, my second best editor is Sublime Text – which is free to use but it is strong recommended that you upgrade for an additional $70.
Finally, you can follow my How to Make a Website guide for more details on building your first site – you may not even need an HTML editor if you choose the easier route of installing a CMS like WordPress.
Leave a Reply