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:

As you are just starting out, you can use Notepad (Windows) or TextEdit (macOS) to write your first file. However, since these basic editors lack syntax highlighting, we recommend starting with a free editor that supports it, such as Visual Studio Code or Notepad++. Let’s have a look at how to create your first file.

Step 1. Open Notepad on your computer

Press the Windows key, type Notepad, and press Enter.

Step 2. Write your code

Write or copy some HTML code.

Example of HTML code:

<!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 »

Result

Step 3. Save 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 should 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).

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), with Chrome DevTools being the most widely used for inspecting and debugging HTML. 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, and the service will check the code for mistakes, or return a message confirming your document is valid.

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 are recommended HTML editors according to the content provided in the specified URL?