HTML Editors and Tools - Free, Online Tutorial

From the previous chapter, we learned that HTML is a markup language used for creating web pages. When creating web pages, you will need the following tools and programs:

a text or HTML editor for writing and editing source code,
a browser for checking results,
a validator - a special program checking the validity or syntactical correctness of source code.

Let’s speak about them in detail.

HTML Editors

There are several professional editors web developers use for coding. However, not every editor could satisfy all your needs. So, a good HTML editor must have the following functionality:

syntax highlighting - displaying text, especially source code, in different colors and fonts,
tab view support - keeping multiple web pages open in tabs at the same time,
checking an HTML document for mistakes,
code folding - hiding large fragments of code to show only a summary or the first line.

The most popular HTML editors are those listed below:

Visual Studio Code — free and open-source, and the most common default recommendation. It runs on Windows, macOS, and Linux. Its strength is its extension ecosystem: add Prettier to auto-format your code, Live Preview (or Live Server) to see changes in the browser instantly, and built-in IntelliSense for tag and attribute auto-completion.
Sublime Text — pick this for raw speed. It opens instantly and stays responsive even with very large files, which makes it popular for quick edits. It is paid software but can be evaluated for free, and runs on all three major platforms.
Notepad++ — a free, lightweight editor that is Windows-only. On macOS or Linux, a comparable lightweight option is the built-in editor (TextEdit on macOS, gedit/nano on Linux), or just use the cross-platform VS Code.
WebStorm — a full IDE from JetBrains. It is paid software (subscription) and is heavier than the editors above, but it bundles deep refactoring, debugging, and framework support out of the box, which suits larger projects.

If you are just starting out and want zero setup, you can use Notepad (Windows) or TextEdit (macOS) to write your first file. However, these basic editors lack syntax highlighting, so we recommend starting with a free editor that supports it, such as Visual Studio Code (any platform) or Notepad++ (Windows). Once you have an editor, learn the basic structure of an HTML document before going further.

Your first HTML file

The steps below use Windows Notepad because it is installed on every Windows machine and needs no setup. The same idea applies to any editor: write the code, save it with an .html extension, then open it in a browser.

Step 1. Open Notepad

Press the Windows key, type Notepad, and press Enter. (On macOS, open TextEdit and switch to plain-text mode via Format → Make Plain Text.)

Step 2. Write your code

Write or copy the HTML below.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Simple example</h1>
    <p>Some text you want to show here</p>
  </body>
</html>

Try it Yourself »

When opened in a browser, this code renders a page with the heading "Simple example" in large bold text, followed by the paragraph "Some text you want to show here".

Step 3. Save the HTML document

Go to File in the Notepad menu and choose Save As. Give your document a name using either the .htm or .html file extension. (We recommend using the .html extension.) Make sure you set the encoding to UTF-8 and set the Save as type dropdown to All Files to prevent Windows from adding a .txt extension. Save the file to a dedicated folder you create beforehand to store all your HTML documents.

Step 4. Check the HTML file in a browser

Open your HTML file in a browser (right-click on the file and choose Open with). You should see the heading and paragraph from the code above.

Browser

You will need a browser to check HTML files. To start with, any browser, Google Chrome, Opera, or Firefox will be enough, but later on, you will need all of them. The thing is that every browser has its own rendering engine, and you will need to check your code in each of them. Modern browsers also include built-in Developer Tools (press F12, or right-click an element and choose Inspect). DevTools let you inspect the live HTML and CSS of any element, tweak styles and see the result instantly, and read the Console, where the browser reports JavaScript errors and warnings. They are the fastest way to figure out why a page does not look or behave the way you expected. For cross-browser testing, you can use online services or virtual machines once your project grows.

Validator

An essential part of the web pages development process is checking the validity of the HTML code. Special validators, programs, or services can be used to check the validity or syntactical correctness of a fragment of code or document.

The most common online service is validator.w3.org. Enter the URL of a web page (or paste your code directly), and the service checks it against the HTML standard. The output is a list of messages: Errors (red) flag code that breaks the standard, such as an unclosed tag or a misspelled element name; Warnings (yellow) point out things that are technically allowed but discouraged. If there are no issues, you get a green message confirming the document is valid. Fixing validator errors is a good habit because invalid markup can render inconsistently across browsers.

For checking the validity of local files, you can use online validators or built-in linters in modern editors like Visual Studio Code. Some editors also provide real-time syntax checking as you type.

Practice

Which of the following HTML editors does this chapter recommend? (Select all that apply)