HTML Editors – Which One Should You Use? | TipsInLearning

Lesson 2 of 22

HTML Editors

You don't need anything fancy to start writing HTML. This lesson walks you through your options — from the text editor that's already on your computer to the one that professional developers use every day — and gets you building your first real file.

6 min read

Beginner

Tools & Setup

In This Lesson

6 min read Beginner

What is an Editor?
Which Editor to Use
Build Your First File
The HTML Code
What It Looks Like
Common Mistakes
Summary
FAQ

Progress0/22

A question we get from beginners all the time: "What software do I need to buy?" The answer is nothing. You already have everything you need on your computer right now. This lesson explains your options so you can make an informed choice — not just follow instructions blindly.

What Even Is an HTML Editor?

An HTML editor is just a program that lets you write and save text. That's it. HTML files are plain text files — no special formatting, no images embedded inside, just characters. Any program that can save plain text can be your HTML editor.

The difference between a basic text editor and a proper code editor is how much it helps you. A plain text editor saves text. A code editor also colours your code so it's easier to read, catches typos before you even run the file, auto-completes tags, and does a dozen other things that save you time as you improve.

One thing to avoid: Microsoft Word, Google Docs, or any word processor. These add invisible formatting behind the scenes — characters your eyes can't see but the browser can. When the browser reads your HTML file and hits those hidden characters, it either ignores them (best case) or displays your page completely wrong (common case). Stick to plain text editors only.

Which Editor Should You Actually Use?

Here's an honest breakdown. We'll tell you which one to start with at the end.

Notepad

Already on every Windows computer. Zero setup, zero learning curve. Perfect for lesson 1.

Built-in on Windows

Sublime Text

Fast and lightweight. Good syntax highlighting. Free to use, though it occasionally asks if you want to buy it.

Free / Paid

VS Code

What most developers actually use. Free, fast, constantly updated, works on Windows, Mac and Linux.

⭐ Most Used Worldwide

Notepad++

A solid free upgrade from Notepad. Windows only, but it colours your HTML and is very lightweight.

Free

Our actual recommendation: Start with Notepad for the first few lessons — not because it's the best tool, but because using a simple editor first forces you to understand what you're typing. Once you've built a few pages and you know what's happening, switch to VS Code. It's free, it's what professionals use, and the features start making sense once you understand the basics.

Build Your First HTML File Right Now

Let's not wait — open Notepad and follow these steps. This takes about 3 minutes.

Open Notepad

Press the Windows key, type Notepad, and hit Enter. Or right-click your desktop → New → Text Document and open it.

Type (or paste) the HTML code

Copy the code from the next section and paste it into Notepad. Don't change anything yet — just get it in there exactly as written.

Save it correctly — this step matters

Go to File → Save As. This is where beginners often go wrong — see the box below carefully.

Set these exactly before clicking Save:
File name: index.html (not index.html.txt)
Save as type: All Files (*.*)
Encoding: UTF-8

Open it in your browser

Find the file you just saved. Double-click it. It should open in your default browser and show a real webpage — not a text file. If it opens in Notepad instead, you saved it as .txt — go back to step 3.

The HTML Code to Use

Paste this into Notepad exactly. We'll explain what each part does in the next lesson — for now just get it working:

HTML — your first index.html

<!DOCTYPE html>
<html>
  <body>

    <h1>My TipsInLearning Page</h1>

    <p>I just built my first HTML webpage!</p>

  </body>
</html>

What It Should Look Like

When you double-click your saved index.html file, the browser renders it as a proper page. No styling yet — that's CSS, which comes later — but the structure is there:

file:///C:/Users/You/index.html

My TipsInLearning Page

I just built my first HTML webpage!

That's genuinely it. Plain, unstyled, but real. The browser read your HTML file and turned it into a rendered webpage. Every professional website in the world started exactly like this — a heading, a paragraph, and an HTML file on someone's desktop.

The Mistakes That Trip People Up Here

These are the two things that cause the most confusion at this stage — both are easy to fix once you know what happened:

The file opens in Notepad instead of a browser
This means it saved as index.html.txt. Windows added .txt automatically because you didn't change "Save as type" to All Files. Delete the file, go back to Save As, and make sure "Save as type" is set to All Files (*.*) before saving again. Then the file icon should look like a browser icon, not a Notepad icon.

You made a change but the browser still shows the old version
Classic. You edited the file but forgot to save it first — then refreshed the browser wondering why nothing changed. Always press Ctrl+S in Notepad before switching to the browser. If you're ever unsure, close the file and reopen it to confirm the latest version was actually saved.

Quick Summary

1Any plain text editor works for HTML. Notepad is fine to start — you don't need to buy anything.

2Never write HTML in Word or Google Docs. They add hidden formatting that breaks your code.

3When saving in Notepad: set "Save as type" to All Files and name the file index.html.

4Once you understand the basics, switch to VS Code — it's free and what most developers actually use.

5If your file opens in Notepad instead of a browser, it saved as .txt — redo the Save As step carefully.

Questions People Ask About Editors

The questions that come up most when beginners set up for the first time:

Do I need to install VS Code right now, or can I start with Notepad?

Start with Notepad. Seriously. You don't need VS Code yet and installing it before you understand what you're doing just adds distraction. Come back to it after you've done 4–5 lessons and you've seen why a proper code editor would have helped you. At that point, installing VS Code will feel like upgrading rather than just following instructions.

I'm on a Mac — I don't have Notepad. What should I use?

Use TextEdit — it's already on your Mac. But there's one important thing: you need to switch it to plain text mode first. Open TextEdit, go to Format → Make Plain Text. Then you can write HTML and save it as .html. Alternatively, just download VS Code from the start — it works exactly the same on Mac as it does on Windows.

Why does my file open as a text file instead of a webpage?

Almost certainly because the file saved as index.html.txt instead of index.html. When saving in Notepad, the "Save as type" dropdown defaults to "Text Documents (.txt)" — and Windows quietly adds .txt to whatever you typed as the name. Change that dropdown to All Files (*.*) before clicking Save and you'll get a proper .html file.

Can I use an online code editor like CodePen instead?

You can experiment in CodePen, but we'd recommend against using it as your main learning tool at this stage. Online editors handle a lot of the file setup for you automatically — which means you don't learn how any of it actually works. Understanding how to create a real .html file, save it correctly, and open it in a browser is important knowledge. Learn that first, then use CodePen for quick experiments later.

Is VS Code really free — no catch?

Yes, completely free. VS Code is open source, made by Microsoft, and has no paid tier. It's available for Windows, Mac, and Linux at code.visualstudio.com. There are paid extensions made by third parties, but VS Code itself and all its core features cost nothing.

HTML Introduction

Next Lesson

HTML Basics

Best HTML Editors for Beginners