HTML Basics

HTML Editors

You can write HTML in any plain text editor, but a good code editor makes the job much easier and faster. This page covers your options and shows you exactly how to create and run your first file.

What is an HTML Editor?

An HTML editor is any program you use to write HTML code. This can be as simple as the Notepad app that ships with your computer, or a full-featured code editor built for developers. The browser is what actually displays the result.

Beginners often start with Notepad or TextEdit to learn that HTML is just text. Most developers quickly move to a dedicated code editor because it adds colour-coding, auto-complete, and error hints that catch mistakes early.

Popular HTML Editors

Editor	Platform	Good for
VS Code	Windows, Mac, Linux	Most developers — free, fast, huge extension library.
Sublime Text	Windows, Mac, Linux	A lightweight, very fast editor.
Notepad	Windows	Absolute beginners who want zero setup.
TextEdit	Mac	Basic editing (switch to plain text mode).
Online editors	Browser	Trying code instantly with no install.

Example: Write This and Save It

Save as index.html then open in a browser

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Testing My Editor</title>
</head>
<body>
  <h1>My editor works!</h1>
  <p>I wrote this in a text editor and opened it in my browser.</p>
</body>
</html>

Steps to Run Your File

Open your editor and paste the code above.
Choose File then Save As.
Name the file index.html (make sure it does not end in .txt).
Double-click the saved file to open it in your browser.

More Examples

Add some colour so you can see changes clearly

Example

<!DOCTYPE html>
<html>
<body style="background:#0d6efd; color:white; font-family:sans-serif; text-align:center; padding:40px;">
  <h1>Hello from my editor</h1>
  <p>Change the background colour and re-run to see it update.</p>
</body>
</html>

⚠️

On Windows, make sure File Explorer shows file extensions. Otherwise your file may secretly be saved as index.html.txt and refuse to open as a web page.

💡

In VS Code, install the "Live Server" extension. It auto-refreshes your page in the browser every time you save — no manual reloading needed.

Key Takeaways

HTML is plain text, so any text editor can write it.
Code editors like VS Code add colour-coding and error hints.
Always save with a .html extension, not .txt.
Open the saved file in a browser to see the result.