</>
Skip to content
HTML lessons (3/60)

HTML — Editors

You need an HTML editor

HTML is plain text, so technically any text editor works — even Notepad. But dedicated code editors give you superpowers:

  • Syntax highlighting — tags get colors, mistakes become visible
  • Auto-completion — type <p> and the editor adds </p> for you
  • Error detection — typos are flagged before you even run the page
  • Code formatting — messy indentation gets fixed automatically
  • Extensions — add languages, themes, linters, FTP tools
  • File management — work with whole project folders

Popular free editors

EditorBest for
Visual Studio CodeEveryone. Industry standard. Start here.
Notepad++Windows users who want something light
Sublime TextSpeed lovers
WebStormProfessionals (paid)
Vim / EmacsTerminal veterans

You can also practice in online editors without installing anything.

Recommended setup: VS Code

  1. Download from code.visualstudio.com
  2. Install it (defaults are fine)
  3. Optional but useful extensions: Live Server (auto-refreshes your browser when you save), Prettier (formats code)

Creating your first webpage

Step 1 — Create a file

Open VS Code → File → New File. Save it as:

index.html

Why "index"? Servers treat index.html as the default starting page of any folder. It's a convention worth following from day one.

Step 2 — Add HTML

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>

    <h1>Welcome!</h1>

    <p>
        Hello! I am learning HTML.
    </p>

    <h2>About Me</h2>

    <p>
        I enjoy learning web development.
    </p>

</body>
</html>

Step 3 — Open it

Double-click index.html. Your default browser opens it and interprets the HTML into a real web page:

Welcome!

Hello! I am learning HTML.

About Me

I enjoy learning web development.

(Two headings with paragraphs beneath them.)

The development loop

From now on, your workflow is always:

Edit code  →  Save (Ctrl+S)  →  Refresh browser (F5)

Tip: put the editor and browser side by side on screen. Instant feedback makes learning dramatically faster.

With the Live Server extension installed, step 3 disappears — the browser refreshes itself on every save.

Mini Practice

Start from the file above and change it:

  1. Change <h1>Welcome!</h1> to <h1>Welcome to My Website!</h1>
  2. Save, refresh — see the heading change
  3. Add a second paragraph under "About Me" describing yourself

Congratulations — you've created and modified a basic HTML webpage.

Next: the skeleton every single page shares →

Related Topics

IntroductionBasicElementsAttributes

Frequently Asked Questions about Editors

What is Editors in HTML?

Editors is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Editors?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Editors.

Why is Editors important in HTML?

Editors is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.