HTML editors at a glance

What does an HTML editor do?

You can write HTML in any plain-text program, but an HTML editor makes the work faster and catches mistakes before they reach your page. Typical features include:

• Syntax highlighting — tags, attributes and text appear in different colors, so the structure is easy to read.
• Auto-completion — the editor suggests tag names and closes tags for you, which prevents broken markup.
• Live preview — the finished page appears next to your code and updates as you type.
• Error checking — unclosed tags, typos and invalid code are flagged as you work.
• File management — keep HTML, CSS and JavaScript files together in folders as a project.
• Formatting — tidy indentation in one click, so messy code becomes readable.

Types of HTML editors

1. Code editors (text-based)

Code editors show the raw HTML and let you type every tag yourself. They give you full control over the code and are what most professional web developers use. Popular examples are Visual Studio Code (free, for Windows, macOS and Linux), Sublime Text (paid, with a free evaluation) and Notepad++ (free, for Windows).

2. Visual (WYSIWYG) editors

WYSIWYG means “What You See Is What You Get”. You design the page visually, dragging and formatting content much like in a word processor, and the editor writes the HTML for you. Examples include Adobe Dreamweaver, which offers both a visual and a code view, Pinegrow, and the block editor in WordPress. They are quick for simple pages, but the generated code can be harder to control.

3. Online (browser-based) editors

Online HTML editors run in your web browser, so there is nothing to download or install. You type code on one side and see the result instantly on the other, which makes them ideal for learning, testing snippets and quick prototypes. Examples include FreeHTMLEditor.net, CodePen and JSFiddle.

Popular HTML editors compared

There is no single best HTML editor; the right one depends on what you’re building and how you like to work. These are some of the most widely used:

Visual Studio Code

Pros: free, fast, and extendable with thousands of extensions, such as Live Server for an auto-refreshing preview. Cons: it needs installing and some setup, and the number of options can feel overwhelming for a complete beginner.

Sublime Text and Notepad++

Pros: very lightweight and quick to open, even with large files. Cons: no built-in live preview, and Notepad++ only runs on Windows.

Adobe Dreamweaver

Pros: combines a visual design view with a code view, which helps people who think visually. Cons: paid subscription, and visual editing can produce more code than you need.

Online editors (CodePen, FreeHTMLEditor.net)

Pros: nothing to install, works on any computer, and shows your page instantly as you type. Cons: you need an internet connection to load them, and very large projects are easier to manage in a desktop code editor.

How to choose an HTML editor

• You’re just starting out: use an online editor with a live preview. You can start in seconds and learn by seeing every change.
• You’re building a full website: a code editor such as Visual Studio Code handles many files, extensions and version control.
• You prefer not to write code: a visual editor or website builder lets you design by pointing and clicking.
• You need to test or share a snippet quickly: an online editor opens instantly on any computer, with nothing to set up.

Try an HTML editor right now

This is a small online HTML editor. Edit the code on the left and the page on the right updates as you type, or open it in the full editor to keep working with files, tabs and export.

Do you need an HTML editor to write HTML?

No. HTML is plain text, so a basic program such as Notepad works: type your code, save the file as index.html and open it in a browser. An HTML editor isn’t required, but its highlighting, auto-completion and instant preview save time and help you avoid the small mistakes that break a page.

How to create your first HTML file

You can make a working web page in under five minutes. Here are two ways.

Option 1: On your computer (Notepad or TextEdit)

1. Open a plain-text editor. On Windows, open Notepad. On a Mac, open TextEdit, then choose Format → Make Plain Text so it doesn’t add formatting.
2. Type a basic page: <!DOCTYPE html>, then <html>, <body>, a heading such as <h1>Hello!</h1>, and the closing tags.
3. Save it as an HTML file. Choose File → Save, name it index.html, and make sure the encoding is UTF-8 (in Notepad, set “Save as type” to “All files”).
4. Open it in a browser. Double-click the file, and it opens in your web browser as a real web page.
5. Edit and refresh. Change the text in your editor, save, and refresh the browser to see the update.

Option 2: Online, with nothing to install

1. Open the free online HTML editor. A starter page is already there.
2. Type or paste your HTML in the code panel on the left.
3. Watch the preview on the right update as you type, with no saving or refreshing needed.
4. Check other screen sizes with the desktop, tablet and mobile buttons.
5. Keep your work: it saves automatically in your browser, and Export downloads the file to your computer.

Not sure which tags to use? The HTML cheat sheet lists them all with copy-ready examples.

Learn the HTML you’ll write in an editor

Our free HTML reference explains every common tag with a live example, and the HTML cheat sheet puts them all on one printable page. Good places to start:

Frequently asked questions