But there’s a dangerous flip side.
If you adopt a bad HTML editor, you could be worse off than you were with a no-frills text tool.
Bad HTML editors are the authors of many misfortunes.
Bad HTML editors hide what’s really going on, insert stuff you don’t want, and tweak your markup without asking your permission.
Not cool.
In the not-so-distant past, web newcomers didn’t have many good choices.
They could buy an incredibly expensive professional product (Adobe Dreamweaver), which was crowded with features they probably didn’t need.
They could plunk down a small amount of money on a shareware HTML editor, but most of those were of middling quality.
They could make do with a slightly upgraded text editor, but that didn’t make life much easier.
Or, they could use an ambitious open source HTML editor, but those were plagued with SSDS (software sudden death syndrome), and few lasted longer than a few years before being abandoned by their creators.
Today, the story is much happier.
But before we look at my top two HTML editor choices, let’s review the requirements you’ll use to separate the stars from the duds.
What you want in an HTML editorBeginners need to establish good markup-writing habits from the very beginning.
With that in mind, here’s a good wish list for a beginner-friendly HTML editor:It’s free.
And not free as in “free trial” or “free edition that’s missing features.
” Fortunately, many of today’s best web editing tools don’t cost a penny.
It’s cross-platform.
The perfect HTML editor works on Windows, Mac, and Linux, so you can get equally comfortable working on any type of computer.
It uses color-coding.
This feature may seem like a frill, but it really isn’t.
Any decent HTML editor uses color to help you separate tags (the markup part of a web page) from the content.
Incidentally, color-coding falls under the umbrella of syntax highlighting, which includes other nifty features.
Another example is tag highlighting, which automatically highlights matching start and end tags (like <li> and </li> in the example below).
© Matthew MacDonaldIt spots mistakes.
An HTML editor can’t fix errors like a word processor corrects spelling.
It can’t stop everything and force you to sort out a problem like a code compiler does when it meets badly formed code.
But it can flag potential problems with red highlighting or squiggly underlines, which is often all you need to avoid a minor catastrophe.
What you don’t want in an HTML editorJust as important is what you don’t want.
Steer clear of any HTML editor that is guilty of one of these crimes:It lets you format your page in a fake “word processor” view.
If you use this magic, you lose control of your HTML.
You might think you’re making your page look beautiful, but your editor is busy injecting tangles of disorganized markup.
And you won’t know, because the editor hides its guilty transgressions out of your sight.
It adds proprietary junk.
Some editors quietly stuff extra details into your markup.
Sometimes these details are designed to help the HTML editor understand your document, so it can provide extra features.
Other times, they’re meant to enable some feature that depends on a certain server technology and might not even be available on the web host where you upload your work (FrontPage Extensions, I’m looking at you).
It’s an open source project from a small company.
Nvu, KompoZer, Amaya, Mozilla Composer — you could fill a graveyard with dead HTML editor projects.
And once an editor dies, you won’t get bug fixes, feature updates, and support for new web standards.
My two favorite HTML editors fulfill all these requirements (and don’t commit any of these crimes).
Let’s meet them.
BracketsBrackets is an HTML editor created by software behemoth Adobe.
It’s relatively recent, having only hit the scene in beta form about four years ago.
Brackets is lightweight and cross-platform.
And considering its popularity (it’s been downloaded hundreds of thousands of times and recently ranked as GitHub’s sixteenth most popular open source project), it’s unlikely to disappear any time soon.
Brackets is good at pretty much everything.
One feature that stands our is its nifty “live preview”, which sidesteps the usual edit-save-refresh cycle.
(That’s when you change your HTML in the editor, save it, and then refresh the browser to load up your changes.
) If you choose to use the live preview feature, Brackets and Google Chrome sync themselves tightly together.
Make a change in your markup, and it shows up in your browser immediately.
Agarg9 [Creative Commons]You can get Brackets at http://brackets.
io.
Visual Studio CodeLike Brackets, Visual Studio code is an open-source, cross-platform HTML editing tool backed by a software giant — in this case, Microsoft.
And though Microsoft has a long and storied history of abandoning promising products (FrontPage, Web Matrix, Expression Web), Visual Studio Code isn’t likely to succumb to the same fate.
That’s because it’s a member of Microsoft’s Visual Studio developer toolset, and wildly popular in its own right.
In fact, Visual Studio Code was ranked as the most popular developer environment in Stack Overflow’s 2018 developer survey.
The chief difference between Brackets and VS Code (that’s what the cool kids call it) is that VS Code is designed to be a complete application development environment.
That means you can start scratching out simple web pages today, and graduate to more advanced code-heavy projects in the future.
Much of this ability is modular — in other words, you download extensions to plug in new features.
The basic VS Code install stays fairly compact, but it can grow to add features like GitHub integration, server-side code, debugging — the sky’s the limit!.The disadvantage is that this ability comes in a slightly more intimidating package.
VS Code is still pretty easy to use, but it’s crowded menus and complex configuration system aren’t quite as natural to non-programmers.
You can get VS Code at https://code.
visualstudio.
com/download.
The free HTML editors that are available today are leagues better than what was on offer just a few years ago.
There are several more options I didn’t describe here, including a few heavy-weight coding environments.
But Brackets and VS Code are the ideal springboard for any beginner — child or adult — that’s learning to write HTML.
They’re also good professional tools, so new learners never need to graduate.
.. More details