1. Technology
You can opt-out at any time. Please refer to our privacy policy for contact information.

Highlight HTML Tags With Syntax Highlighting

If Your Text Editor Doesn't Make Tags a Different Color, Get a New Editor


Highlight HTML Tags With Syntax Highlighting

Syntax Highlighting in Notepad++. The red line reminds me I missed a closing tag.

So, you know you should write long articles in a text editor before you paste them into your CMS. And that means writing in HTML.

Once you're ready to start writing HTML, it's easy as firing up Notepad. But don't pull that trigger just yet. Notepad may be there, but it isn't the best choice.

HTML has its own challenges. You deserve a better text editor. (Don't worry, the best ones are free.)

HTML Tags Are Ugly

The first challenge with HTML is that it's ugly. Let's just come out and say it. Ugly.

In a word processor, like Microsoft Word or the free LibreOffice, you get used to seeing how your document will look. (At least, how it might look.)

HTML is a big shift. All your nice formatting is removed. In exchange, all this tag crud is added. It's an adjustment.

HTML Mistakes Are All Too Easy

Another HTML challenge: it's extremely easy to make mistakes.

If you don't pay attention, you might think this <em very simple
sentence</em> doesn't have a mistake. But it does.

Did you spot the error? Here's what the browser gives you:

If you don't pay attention, you might think this doesn't have a mistake. But it does.

Instead of <em>, I typed <em. Without the closing >, the browser couldn't stop that opening tag. It didn't find a closing > until it got to </em>.

So, it turned <em very simple sentence</em> into <em>.

Not only did I lose three words of sterling prose, I also lost my closing </em>. Which is why italics are still turned on. Which I'll stop now, if you don't mind.

This is the dark side of HTML. A single missed character can have bizarre results.

Basic Problems Are Easy to Correct

Fortunately, you can usually fix a basic problem by examining where it starts. In this case, we had runaway italics, so we would check where the italics began.

Still, it would be much better if we had visual cues to help us spot whether our tags were closed.

Syntax Highlighting: Tags in Color

The solution is called syntax highlighting. A good text editor will highlight HTML tags with different colors.

Look at the screenshots I've attached to this article. Isn't that so much better than Notepad?

Writing HTML with syntax highlighting is a completely different experience than slogging away in Notepad.

  • The colored tags are visually separate from your "real" text. You can focus on your content again.

  • Some text editors will give you visual hints if you forget to close a tag.

  • Some text editors will even italicize and bold your text when you put it between those tags.

Text editors come with tons of other features, too. We're only talking about syntax highlighting.

Seriously, you owe it to yourself to download a good text editor. Besides, they're free.

Windows: Try Notepad++

Programmers love text editors, so they keep making new ones. There are hundreds of free text editors out there, not to mention the ones you could pay for.

However, I'll make this easy. If you're on Windows, try Notepad++. Notepad++ is free and open source, and it's very easy.

Just save a new file with an .html extension, and Notepad++ will turn on syntax highlighting.

You can always try a different editor later. You almost certainly will. But Notepad++ will get you started.

Download Notepad++.

Macs or Linux: Try Emacs

Notepad++ is only available for Windows, so if you're on a Mac or Linux, try ... wait for it ... Emacs.

Actually, I'm partly joking. In certain circles, suggesting a text editor can be highly controversial.

But hey, I don't even need to include a download link. Emacs is (probably) already installed on your system.

If you know how to open a terminal, just type in emacs, save a new file with an .html extension, and give it a try.

View Your HTML In the Browser

As you write, you'll want to see how your HTML looks in the browser. Good text editors make this easy.

In Notepad++: click Run on the menu, and you'll see options to launch in several browsers.

In Emacs: click HTML on the menu, then Load this Buffer in Browser.

Favorite Text Editor? Let Me Know! Maybe!

I'm not entirely sure I want to open the phones on this one. But if you're using a text editor to write articles in HTML, and you don't think every other editor is bloatware, share your thoughts. Maybe you've found an even easier way to get started using syntax highlighting.

©2014 About.com. All rights reserved.