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.
<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
So, it turned
<em very simple sentence</em> into
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.
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.
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.