Suggested Text Editors for HTML5 and CSS3 Programming

By Andy Harris

Because a text editor is such an important tool when programming for HTML5 and CSS3, it might depend a bit on your preferences, but here are a few good ones. Note that every editor here is entirely free.

A noteworthy editor: Notepad++

A number of developers have come up with good text editors. Some of the best are free, such as Notepad++ by Don Ho. Notepad++ is designed for text editing, especially in programming languages.

image0.jpg

Notepad++ has a lot of interesting features. Here are a few highlights:

  • Syntax highlighting: Notepad++ can recognize key HTML terms and put different types of terms in different colors. For example, all HTML tags are rendered blue, and text is black, making it easy to tell if you’ve made certain kinds of mistakes, such as forgetting to end a tag. Note that the colors aren’t saved in the document.

  • Multiple files: You’ll often want to edit more than one document at a time. You can have several different documents in memory at the same time.

  • Multi-language support: Currently, your pages consist of nothing but HTML. Soon enough, you’ll use some other languages, like SQL, CSS, and PHP. Notepad++ is smart enough to recognize these languages, too.

  • Macros: Whenever you find yourself doing something over and over, consider writing a keyboard macro. Notepad++ has a terrific macro feature. Macros are easy to record and play back a series of keystrokes, which can save you a lot of work.

  • Page preview: When you write a page, test it. Notepad++ has shortcut keys built in to let you quickly view your page in Internet Explorer (Ctrl+Alt+Shift+I) and Firefox (Ctrl+Alt+Shift+X).

  • TextFX: The open-source design of Notepad++ makes it easy to add features. The TextFX extension (built into Notepad++) allows you to do all sorts of interesting things. One especially handy set of tools runs HTML Tidy on your page and fixes any problems.

Sadly, Notepad++ is a Windows-only editor. If you’re using Mac or Linux, you need to find something else. The closest alternative in the Mac and Linux world is gedit.

gedit

One simple but effective editor available free for all major operating systems is gedit. It is the default editor for many versions of Linux, but you can download it for Mac and Windows.

It has all the standard features including syntax highlighting (which colors different parts of code in different colors to help with debugging), line numbers, and a tag list, which is a special menu which allows you to pick common HTML tags from a list if you forget some syntax.

Sadly, gedit does not have a macro editor. This may not be a deal-breaker for you, but often a macro tool is extremely useful. If you need a very nice general-purpose editor, consider gedit. It does much of what you might want without getting terribly complicated.

image1.jpg

The old standards: VI and Emacs

No discussion of text editors is complete without a mention of the venerable UNIX editors that were the core of the early Internet experience. Most of the pioneering work on the web was done in the UNIX and Linux operating systems, and these environments had two extremely popular text-editor families. Both might seem obscure, but they still have passionate adherents, even in the Windows community.

VI and VIM

VI stands for VIsual Editor. That name seems strange now because most developers can’t imagine an editor that’s not visual. Back in the day, it was a very big deal that VI could use the entire screen for editing text. Before that time, line-oriented editors were the main way to edit text files.

image2.jpg

VI is a modal editor, which means that the same key sometimes has more than one job, depending on the editor’s current mode. For example, the I key is used to indicate where you want to insert text. The D key is used to delete text, and so on.

Of course, when you’re inserting text, the keys have their normal meanings. This multimode behavior is baffling to modern users, but it can be amazingly efficient after you get used to it. Skilled VI users swear by it and often use nothing else.

VI is a little too obscure for some users, so a number of variants are floating around, such as VIM, or VI Improved. VIM is a little friendlier than VI, and GVIM is friendlier yet. It tells you which mode it’s in and includes such modern features as mouse support, menus, and icons. Even with these features, VIM is not intuitive for most people.

Versions of VI are available for nearly any operating system being used. If you already know VI, you might enjoy using it for web page development because it has all the features you might need.

Emacs

The other popular editor from the UNIX world is Emacs. Like VI, you probably don’t need this tool if you never use Linux or UNIX. Also like VI, if you know it already, you probably don’t need anything else. Emacs has been a programmer’s editor for a very long time (since 1976) and has nearly every feature you can think of.

Emacs also has a lot of features you haven’t thought of, including a built-in text adventure game and even a psychotherapist simulator.

Emacs has very powerful customization and macro features and allows you to view and edit more than one file at a time. Emacs also has the ability to view and manipulate the local file system, manage remote files, access the local operating system (OS) shell, and even browse the web or check e-mail without leaving the program.

If you’re willing to invest in a program that takes some effort to understand, you’ll have an incredibly powerful tool in your kit. Versions of Emacs are available for most major operating systems.

An enhanced version — XEmacs — uses standard menus and icons like modern programs, so it’s reasonably easy to get started with.

image3.jpg