HTML Setup and Editors: Install Tools and Start Writing HTML

HTML does not need a heavy toolchain, which makes it one of the easiest web technologies to start with. In this guide, you will learn what you actually need to write HTML, how to choose and install a suitable editor, how to verify your setup, and how to fix the most common beginner problems so you can start building pages confidently.

Quick answer: To start writing HTML, you usually only need a text editor and a web browser. A modern setup for most beginners is Visual Studio Code plus any current browser such as Chrome, Edge, Firefox, or Safari.

Difficulty: Beginner

Helpful to know first: You will understand this better if you already know what files and folders are, how to create a new file on your computer, and how a web browser opens local files.

1. What You Need (Requirements)

Unlike many programming environments, HTML setup is simple. You do not need a compiler, package manager, or runtime just to create and view a basic web page.

For beginners, the most practical editor choices are:

An HTML editor and a browser are enough to begin. Tools like live preview extensions, Emmet, Git, and terminal utilities are helpful later, but they are optional for your first pages.

You should also avoid word processors such as Microsoft Word or Google Docs for HTML authoring. They are designed for formatted documents, not plain source files, and may save content in formats that break your page.

2. Installation Steps

This section shows a practical beginner setup using Visual Studio Code, because it works well across operating systems and has strong HTML support out of the box.

Install a modern web browser

  1. Choose one browser you will use for testing, such as Chrome, Edge, Firefox, or Safari.
  2. If it is not already installed, download it from the browser vendor's official site.
  3. Open the browser once to make sure it starts normally.

You can test HTML in any modern browser, but using one primary browser at first keeps your workflow simple.

Install Visual Studio Code on Windows

  1. Download Visual Studio Code from the official website.
  2. Run the installer.
  3. During setup, enable options that add VS Code to your PATH and context menu if available.
  4. Finish installation and open the editor.

Install Visual Studio Code on macOS

  1. Download Visual Studio Code for macOS.
  2. Open the downloaded archive or installer.
  3. Move Visual Studio Code into your Applications folder.
  4. Start the app and allow any system prompts if shown.

Install Visual Studio Code on Linux

The exact package depends on your distribution. Common installation approaches include package files or a package manager.

# Debian/Ubuntu example after adding the package source
sudo apt install code

# Fedora example
sudo dnf install code

If your distribution uses a different package name or repository, follow the official installation steps for that platform.

Create your first HTML project folder

  1. Create a folder named html-practice.
  2. Open that folder in your editor.
  3. Create a file named index.html.
  4. Add a minimal HTML document.

Here is a simple starter file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First HTML Page</title>
</head>
<body>
  <main>
    <h1>Hello, HTML!</h1>
    <p>This page is working.</p>
  </main>
</body>
</html>

This gives you a valid HTML5 file with semantic structure, language information, and mobile-friendly viewport settings.

Optional: open the project from a terminal

If the editor command-line tool is available, you can open the current folder directly.

code .

This command is optional, but many developers use it in daily work.

3. Verifying the Installation

After setup, confirm that your tools are working correctly. This prevents confusion later when a page does not open or an editor command fails.

Verification Checklist

To check the editor command in a terminal:

code --version

Expected result: a version number should be printed. If you get a command not found error, the editor itself may still be installed, but its terminal command is not configured.

To verify the HTML file visually:

  1. Open index.html in your browser.
  2. Confirm that you see the heading Hello, HTML!.
  3. Change the paragraph text in the editor.
  4. Save the file and refresh the browser.

If the updated content appears after refresh, your basic HTML workflow is working correctly.

4. Recommended Initial Configuration

HTML does not require much configuration, but a few editor settings can make your work smoother and help you avoid beginner mistakes.

Use UTF-8 file encoding

UTF-8 is the standard text encoding for modern HTML documents. Most editors use it by default, but it is worth confirming.

This works well with the document declaration:

<meta charset="utf-8">

Using UTF-8 helps text display correctly across browsers and platforms.

Enable autosave or save often

Many beginners think their HTML is not working when the real issue is that the file was never saved. Autosave reduces that problem.

Turn on word wrap and format support

HTML becomes much easier to read when nested elements are consistently indented. A good editor can format markup automatically and help you spot missing closing tags.

Useful extensions and features

A live preview tool is convenient, but it is optional. You can always open the file directly in a browser and refresh manually.

Prefer semantic HTML from the start

Even in a simple practice file, use meaningful elements when appropriate.

<body>
  <header>
    <h1>Sample Site</h1>
  </header>
  <main>
    <p>Welcome to the page.</p>
  </main>
</body>

This structure is clearer than using generic containers everywhere, and it supports accessibility and maintainability.

5. Common Setup Issues and Fixes

Most HTML setup problems are simple once you know what to look for. Here are common issues beginners encounter.

Issue 1: The editor command says “command not found”

This usually happens when the editor is installed, but its terminal command was not added to your PATH.

Problem: You are trying to launch the editor from the terminal with a command such as code, but the shell cannot find that executable.

code .

Fix: Enable the editor's shell command installation option, or reinstall the editor and select the PATH integration setting.

# After PATH is configured correctly, this should work
code .

Once PATH is configured, your terminal can locate the editor command.

Issue 2: The file opens as plain text instead of a web page

This often happens when the file extension is wrong. Beginners sometimes save a file as index.html.txt without noticing.

Problem: The browser or operating system does not recognize the file as an HTML document because the file is not actually saved with the .html extension.

Wrong file name
index.html.txt

Fix: Rename the file so its real extension is .html.

Correct file name
index.html

The corrected file name lets the browser treat the document as HTML.

Issue 3: Changes do not appear in the browser

If your page does not update, the usual causes are an unsaved file, an old tab, or a missing refresh.

Problem: You edited the source code, but the browser is still showing an older saved version of the file.

You changed the text in the editor but did not save the file yet
<p>Updated content</p>

Fix: Save the file, then refresh the browser tab or reopen the file.

Saved HTML file
<p>Updated content</p>

The page updates only when the browser reads the saved version of your file.

Issue 4: Special characters look broken

If letters or symbols display incorrectly, the document encoding may be inconsistent.

Problem: The editor or document may not be using UTF-8, so accented characters or symbols render incorrectly in the browser.

<head>
  <title>Café Page</title>
</head>

Fix: Save the file as UTF-8 and include the charset declaration in the document head.

<head>
  <meta charset="utf-8">
  <title>Café Page</title>
</head>

The corrected version works because the file encoding and the HTML metadata now match.

Issue 5: TextEdit or another basic editor saves rich text

Some default editors are designed for formatted documents, not source code.

Problem: If the editor saves rich text instead of plain text, your file may contain formatting data that breaks the HTML source.

The file appears to contain text, but it was saved in a rich-text format instead of plain text

Fix: Switch the editor to plain text mode before saving, or use a code editor such as Visual Studio Code.

Plain text HTML source saved as index.html
<p>Plain text HTML works correctly.</p>

HTML files must be saved as plain text so the browser can parse the markup correctly.

6. Keeping Things Updated

HTML itself does not need updating on your machine, but your tools do. Keeping your browser and editor current improves standards support, security, and editing features.

If your editor was installed with a package manager, updates may use commands such as these:

# Debian/Ubuntu example
sudo apt update
sudo apt upgrade

# Fedora example
sudo dnf upgrade

On Windows and macOS, many editors include their own update flow inside the application.

7. Key Points

8. Next Steps

After your setup is working, the best next step is to start writing small, valid HTML pages and get comfortable with the browser refresh cycle.

9. Final Summary

Setting up HTML is refreshingly simple. You do not need a complex build process or special runtime to begin. A reliable plain-text editor and a modern browser are enough to create, save, open, and test web pages on any major operating system.

A good beginner workflow is to create a project folder, add an index.html file, write valid semantic HTML5, save your changes, and refresh the browser. If something goes wrong, check the basics first: file extension, plain-text saving, UTF-8 encoding, PATH configuration for editor commands, and whether the file was actually saved. Once this setup feels comfortable, you are ready to move on to HTML document structure, semantic elements, and accessibility-focused page authoring.