Setting Up HTML – Everything You Need to Start

The Minimum Setup – 2 Minutes

You literally need only two things:

1. 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.
2. 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.

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

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

Recommended VS Code Extensions for HTML

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:

! → 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:

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

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).

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:

Setting Up to Write HTML (You Need Almost Nothing)

HTML needs no compiler, no server, no installation — a text editor and a browser are enough. But a few tools make the experience dramatically better from day one.

<!-- VS Code Emmet: type "!" then Tab → full boilerplate instantly -->
<!-- type "ul>li*3" then Tab → a list with 3 items -->

The absolute minimum: create a file ending in .html, write markup, and double-click it to open in a browser. That's it — HTML runs locally with zero setup. Two upgrades that pay off immediately: (1) Emmet (built into VS Code) turns shorthand into HTML — typing ! then Tab expands to the full page boilerplate, and abbreviations like ul>li*3 generate nested markup, saving huge amounts of typing. (2) A Live Server extension serves your page and auto-refreshes the browser every time you save, so you see changes instantly instead of manually reloading. Learn DevTools early: press F12 to inspect any element, see the applied CSS, and edit the page live — it's how you debug layout and understand other sites. No build step is needed until you add tools like Sass or a bundler later.

Interview Questions

• What tools do you need to start writing HTML?
• Why is a code editor like VS Code better than a plain text editor?
• What does the Live Server extension do?
• What is Emmet and how does it speed up writing HTML?
• Why is it good practice to keep each project in its own folder?

Related Topics