What's New Tutorial Index References RSS Feed Contact

Text Editors

Now that you've taken the plunge, it's time to start assembling your toolkit. The bare minimum of what you need is already available on your computer—but you can do better. The first tool I'll be examining is a type of document writer known as a text editor.

Text editors, at their core, are incredibly simple. They edit plain text, or any text without formatting—no boldface, italics, fonts, alignment, images, adjustable margins, and so on. Text editors can do none of them. This is in stark contrast to a word processor like Microsoft Word, which all work exclusively on formatting text. Here's a visual comparison between Notepad, which is a text editor that comes with Windows, and Wordpad, which is a word processor that comes with Windows.

A comparison between Notepad and Wordpad
Text editors, because they're normally used to edit web pages, scripts and configs, and code, often use a typewriter-like font—monospaced if you prefer. You can also use this to spot a text editor from a word processor.

So why the distinction, and why text editors then? You don't know it, but word processors set your formatting using invisible formatting codes embedded into the document. Even if the text looks "plain", there's still a font set, a font size set, alignment set—all things that can confuse a program trying to read a web page. Text editors don't have formatting codes—therefore, they're suitable for editing anything that a computer would need to read, such as a configuration file, a script, or a web page.

As said, Windows comes with a text editor, Notepad. Various flavors of Linux package in a variety of text editors, both graphical and command-line in nature. MacOS, on the other hand, has no built-in text editor, aside from a clunky, hidden-away plain text mode in TextEdit. On Mac, you'll want to install a proper, standalone text editor for any serious web development.

What to look for in a text editor

As I said in the intro, you can do better than Notepad. It'll work, but it's missing key features you'll come to love and rely on as you get up to speed making sites. Many aftermarket text editors are chock full of tools to help keep your markup clean and even detect errors. Here's a few to be on the lookout for if you're browsing:

Syntax highlighting

Most text editors and IDEs will recognize the language you're writing in and color-code tags, attributes, and declarations for you. This is called syntax highlighting, and for being able to read your markup, especially without whitespace, it's invaluable. It's also good for spotting any errors you've made—if something you know should be colored in one color isn't, you've made a mistake somewhere.

Notepad++ demonstrating syntax highlighting
Notepad++, one of my recommended text editors, demonstrating syntax highlighting on a stylesheet. Note that classes appear in green, rules in blue, and pseudo-classes in purple. This helps to visually separate them from one another.

(All example blocks of styling and markup featured on Tesserae are colored using a syntax highlighting script for ease of reading.)

Autocompletion

Text editors are pretty good at helping you keep your brackets and quotes closed too. In HTML and especially CSS, that's important. Some, especially the ones geared towards web development, will even insert the closing tag for you as soon as you type the opening tag. Autocompletion features will help keep you from accidentally forgetting to close a string and wondering why your page stopped working.

Notepad++ demonstrating tag completion
Notepad++ demonstrating tag completion

Auto-tabbing

If you're the type to use a lot of tab spaces in your markup for readability, some text editors will detect how far you've indented and match that when you make a new line.

Notepad++ demonstrating auto-tabbing
Notepad++ demonstrating auto-tabbing

Multiple file support

One of Notepad's most severe limitations is that it can only edit a single file at a time. If you're juggling editing two pages and a stylesheet, you'll have three windows to move between while you're working. In contrast, most text editors and IDEs feature support for opening multiple files at once, usually in tabs just like your web browser. Some even go a step further and let you edit files side-by-side.

Notepad++ demonstrating editing two files at once
I have two pages open side-by-side in Notepad++, with more open in other tabs.

Plugin support

This one is more a nice-to-have than anything else, but many text editors feature plugin support to extend the capabilities of the program. Plugins can provide support for things like a page preview, file compare, file manager, and even a spellchecker, if the program doesn't come with it natively. If you're willing to dig through the ecosystem of plugins for your text editor of choice, you might just be surprised at what's out there.

Recommended text editors

Of course, all that might mean nothing to you (only for now, I hope), and you just want my recommendation. Let's get into those then.

For Windows: Notepad++

Notepad++ logo

I've been using Notepad++ throughout this page to demonstrate text editor features because it really, truly has them all. Completion, syntax highlighting, multiple file support in tabs and side-by-side, tons of languages supported (and you can add more), fast, customizable, free, and it has plugin support. I personally swear by Notepad++ for any website work I need to do, and it's the one I recommend to anyone using Windows.

In fact, that's about its only drawback: it's Windows-only. But for those of you on Windows, this might very well be all you need.

For MacOS: BBEdit

BBEdit logo

BBEdit has been a staple of the savvy Mac user's toolbox since the early 90s, and for good reason: it doesn't suck. In some ways, it's actually way more powerful than Notepad++, featuring the same customizability and autocompletion, multiple file, and plugin support, but if you spring for the full, paid version, you also get advanced HTML, Git, shell, and web server support that make it a dream for power users. There's enough stuffed into it that I can't sum it all up here. Here's their feature comparison if you'd like to see for yourself, and this still isn't everything.

If you're just a casual web builder, though, BBEdit's free mode will be more than enough for you.

For Linux/cross-platform: Atom

Atom logo

Linux users have no shortage of quality text editors, all with their own ecosystems and learning curves, but if you're just starting out (or you want an alternative to the previous two, for Windows and Mac users), try Atom. A self-proclaimed "hackable text editor for the 21st century", Atom's from the folks behind Github, so tight integration with it and collaborative editing are built-in. With a slick interface, autocompletion, a file manager, and theming and plugin support, Atom is quite the contender in its own right.

Be warned that Atom does run using Electron, so if that's a dealbreaker for you, you might want to look for a more native app.

Summary:

  1. A text editor is a program used for editing plain text—text with absolutely no formatting whatsoever.
    • Text editors differ from word processors like Microsoft Word and LibreOffice Writer, as they work exclusively with formatting text.
    • Text formatting in a word processor is invisible and can lead to broken and garbled web pages. This is why a text editor is necessary to write them instead.
  2. Windows comes with a basic text editor in Notepad, while different Linux distros come with a variety of text editors. Mac users are a bit out in the cold and will have to install something aftermarket.
  3. A good text editor should have a few specific features to make your life easier:
    • Syntax highlighting, which color-codes your markup to make it easier to read and spot errors
    • Autocompletion, which inserts closing brackets and tags for you to help keep your strings and elements closed
    • Auto-tabbing, which matches your indent level for easier-to-read code and markup
    • Support for opening multiple files
    • Plugins to extend the functionality of the editor

Further reading