HTML Editors

An HTML editor is simply a program where you type HTML code. Because HTML files are plain text, any editor works, from Notepad on Windows to TextEdit on macOS. Most developers, however, use a code editor that adds colour highlighting, auto-completion and error hints.

Popular HTML Editors

• Visual Studio Code: free, fast, and the most popular choice today
• Sublime Text: lightweight and very quick
• WebStorm: a full IDE with powerful refactoring (paid)
• Notepad / TextEdit: built in, fine for your very first file
• Online editors such as the Try it Yourself box on this site

Create Your First HTML File

Open your editor, paste the code below, and save it as index.html. The .html extension is important: it tells your computer to open the file in a browser. In Notepad, choose "All Files" as the file type and UTF-8 as the encoding.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Saved From My Editor</title>
</head>
<body>
  <h1>It works!</h1>
  <p>I created this file in a text editor and opened it in my browser.</p>
</body>
</html>

Open the File in a Browser

Double-click index.html, or drag it into an open browser window. After editing, save the file and press F5 (or Cmd+R) to refresh. In VS Code, the free "Live Server" extension reloads the page automatically every time you save.

Helpful VS Code Shortcuts

In VS Code, type ! and press Tab in an empty .html file to generate a full HTML boilerplate. Emmet abbreviations also work: typing ul>li*3 and pressing Tab creates a list with three items.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>Generated by Emmet</li>
    <li>Saves typing</li>
    <li>Works in VS Code</li>
  </ul>
</body>
</html>

Frequently asked questions

What is the best HTML editor for beginners?

Visual Studio Code is the most common recommendation. It is free, works on Windows, macOS and Linux, and has built-in Emmet and many helpful extensions.

Should I save my file as .htm or .html?

Both work identically. .html is the modern convention and is what most projects use.

Why does my HTML file open as text instead of a web page?

Usually the file was saved as index.html.txt. Turn on file extensions in your operating system and rename it so it ends in .html only.