Setting Up HTML – Text Editor, Browser & VS Code for Beginners

The Minimum Setup – 2 Minutes

You literally need only two things:

A text editor — any app that saves plain text: Notepad (Windows), TextEdit (Mac, set to plain text mode), gedit (Linux). These are pre-installed on your computer.
A web browser — Chrome, Firefox, Safari, or Edge. Already installed.

That's it. Create a file, save it with a .html extension, double-click it, and it opens in your browser. This works right now, before installing anything.

💡

Try it right now

Open Notepad (Windows) or TextEdit (Mac). Type <h1>Hello HTML!</h1>. Save as test.html (make sure the extension is .html, not .txt). Double-click the file. Your browser opens and shows a large bold heading. You just ran your first HTML page.

The Recommended Setup – VS Code (Free)

While any text editor works, Visual Studio Code (VS Code) is the industry-standard editor for web development. It is free, open-source, available on Windows, Mac, and Linux, and has superb HTML support built in.

Installing VS Code

Go to code.visualstudio.com in your browser.
Click the download button for your operating system (Windows, macOS, or Linux).
Run the installer. Accept the defaults — optionally check "Add to PATH" and "Open with Code" context menu entries on Windows.
Open VS Code. You are ready.

ℹ️

VS Code already knows HTML

VS Code has HTML support built in: syntax highlighting, tag autocompletion (Emmet), tag closing, bracket matching, and hover documentation. You do not need to install anything for basic HTML. The extensions below add even more productivity features.

Recommended VS Code Extensions for HTML

Extension	What it does	Priority
Live Server by Ritwick Dey	Launches a local server and auto-refreshes your browser every time you save your HTML file. Eliminates the need to manually refresh. Indispensable.	🔴 Install first
Prettier by Prettier	Auto-formats your HTML on save — consistent indentation, quote style, and attribute alignment. Keeps code readable.	🔴 Install first
Auto Rename Tag by Jun Han	When you rename an opening tag, the closing tag updates automatically. Saves many keystrokes when refactoring.	🟡 Highly recommended
HTML CSS Support by ecmel	Autocompletion for CSS class names defined in your stylesheets. Type a class name in HTML and it offers completions from your `.css` files.	🟡 Highly recommended
Highlight Matching Tag by vincaslt	Highlights the matching opening/closing tag when your cursor is on one — crucial for navigating deeply nested HTML.	🟢 Useful
Path Intellisense by Christian Kohler	Autocompletes file paths in `src=""` and `href=""` attributes. Prevents typos in image and link paths.	🟢 Useful

Emmet – Write HTML 10x Faster

VS Code has Emmet built in — a shorthand system for writing HTML. You type a short abbreviation, press Tab, and it expands to full HTML:

Emmet Abbreviations → HTML

! → Full HTML5 document boilerplate
h1 → <h1></h1>
p → <p></p>
a → <a href=""></a>
img → <img src="" alt="">
ul>li*3 → <ul><li></li><li></li><li></li></ul>
div.container → <div class="container"></div>
div#header → <div id="header"></div>
nav>ul>li*4>a → navigation with 4 list items each containing a link
input[type="email"] → <input type="email">
table>tr*3>td*4 → table with 3 rows and 4 cells each

The most useful shortcut: type ! in an empty .html file and press Tab. VS Code generates the complete HTML5 boilerplate in one keystroke.

Using Live Server

After installing the Live Server extension:

Open your HTML file in VS Code.
Click the "Go Live" button in the bottom-right status bar, OR right-click in the editor and choose "Open with Live Server".
Your browser opens at http://127.0.0.1:5500/yourfile.html.
Every time you save the file (Ctrl+S / Cmd+S), the browser refreshes automatically.

⚠️

Use Live Server — not double-click

Opening an HTML file by double-clicking runs it under the file:/// protocol. Some features (JavaScript modules, fetch API, web fonts) are blocked for security when using file://. Live Server runs a proper local HTTP server at localhost:5500, which behaves like a real web server. Use Live Server from day one so you never hit mysterious security errors.

Browser Developer Tools

Every modern browser has built-in developer tools — one of the most powerful learning and debugging tools available. Open them with F12 (or right-click any element → Inspect).

DevTools Panel	What you use it for in HTML/CSS
Elements	View the live DOM tree, inspect and edit HTML elements and attributes in real time, see how the browser interpreted your HTML
Styles	View and edit CSS rules applied to selected elements — changes are instant and reflected in the browser (but not saved to your file)
Console	See JavaScript errors and warnings, run JavaScript snippets to interact with the page
Network	See every resource the browser loads (HTML, CSS, JS, images) and how long each takes
Device toolbar	Simulate mobile screens — test how your HTML responds at different screen sizes (iPhone, iPad, etc.)

Online HTML Editors – Zero Install

If you want to practise HTML without any local setup at all, these online editors let you write and preview HTML immediately in your browser:

Editor	Best for
CodePen (codepen.io)	Quick HTML + CSS + JS experiments; sharing code snippets; viewing other people's work
JSFiddle (jsfiddle.net)	Testing HTML + CSS + JS combinations; simple live preview
StackBlitz (stackblitz.com)	Full project setups in the browser; supports npm packages; excellent for frameworks
CodeSandbox (codesandbox.io)	Full project environments; React, Vue, OWL JS; share entire projects via URL

📋 Summary

Minimum setup: any text editor + any browser. Save as .html and open in browser.
Recommended: VS Code (free) + Live Server extension for auto-reload + Prettier for auto-formatting.
Type ! + Tab in VS Code to generate a full HTML5 boilerplate instantly (Emmet shortcut).
Use Live Server (localhost:5500) rather than double-clicking files — avoids file:// protocol issues.
Open browser DevTools with F12 — the Elements panel lets you inspect and live-edit any page's HTML and CSS.
Online options: CodePen, JSFiddle, StackBlitz — write HTML in your browser with zero installation.

🏋️ Exercise

Set up your HTML environment right now:

Install VS Code if you haven't already.
Install the Live Server extension.
Create a folder called html-practice on your Desktop.
Open that folder in VS Code (File → Open Folder).
Create a new file: index.html.
Type ! and press Tab — Emmet generates the boilerplate.
Inside <body>, add an <h1> with your name and a <p> with a sentence about yourself.
Click "Go Live" in the status bar and verify it opens in your browser.
Change the heading text, save the file, and watch the browser update automatically.