HTML Editors: Tools to Write and Run HTML

You do not need to buy or install anything special to write HTML. A plain text editor and a web browser are enough.

Choosing an editor

Any editor that saves plain text works. These are good choices for learning:

Visual Studio Code: free, popular and full of helpful features such as auto-complete.
Sublime Text or Notepad++: light and fast.
An online playground: useful for quick tests, but you should also learn to work with real files.

Avoid word processors such as Word. They add hidden formatting that breaks HTML files.

lightbulb

Turn on word wrap and a visible file extension

In your editor, turn on word wrap so long lines stay readable. In your operating system, show file extensions so you can see that your file ends in .html and not .html.txt.

Create your first project folder

Create a folder called html-course somewhere easy to find.
Open that folder in your editor.
Create a new file and save it as index.html.
Type the code below into the file and save it.

index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Editor test</title>
</head>
<body>
  <p>If you can read this, your setup works.</p>
</body>
</html>

Open the file in a browser

Double-click index.html, or drag it onto a browser window. You should see the sentence from the file. When you change the file, save it and refresh the browser to see the change.

warning

The file shows code instead of a page

If the browser shows your tags as text, the file was probably saved as index.html.txt or with a word processor. Rename it to index.html and make sure it is saved as plain text.

Browser developer tools

Every modern browser has developer tools. Press F12 or right-click a page and choose Inspect. You can look at the HTML of any page, including this one, and change it temporarily to see what happens. Nothing you change there is saved.

Now that your setup works, write a real page in Your First HTML Page.