Getting Started with HTML

Setting up your environment in VS Code

If you’ve already got a code editor set up and want to skip ahead, click here for the next page.

This first tutorial is mostly practical setup: getting an editor ready, creating an HTML file, and viewing it in a browser. It isn’t glamorous, but it saves a lot of faff later.

Why VS Code?

I’ve chosen VS Code for these tutorials because it’s free, solid, and easy to get along with. There’s a huge extension library, and it works well whether you’re just starting out or you’ve been at this for years.

That said, use whatever you’re comfortable with (even Notepad, if you must). Everything in this series will work in any text editor. I’ve used Sublime Text, Atom, Notepad and Notepad++ over the years. I’m on VS Code at the moment – that may change.

If you want to follow along with VS Code and haven’t installed it yet – read on. If not, skip to creating your first HTML file and use your own editor.

Installing VS Code

To install it, head over to the Visual Studio Code website and download the version for your system (Windows, macOS, or Linux). The installer is straightforward – just follow the on-screen steps.

A quick look around

Once it’s installed, open VS Code and take a minute to look around. On the left you’ll usually see Explorer, Search, Source Control and Extensions. The big area on the right is where you write and view your code.

Setting up for HTML

VS Code supports HTML out of the box, but a couple of extensions make life easier. Think of extensions as small add-ons – extra tools when you need them.

Useful extensions

Live Server: opens your HTML file in a browser and refreshes it when you save. Handy when you’re checking changes as you go.
Prettier: a formatter that keeps your code tidy and consistent.
HTML Snippets: shortcuts for common HTML patterns, which saves a bit of typing.

To install an extension, click the Extensions icon in the sidebar, search for the name, and click ‘Install’.

Creating your first HTML file

Let’s make a file:

Open VS Code.
Click on ‘File’ > ‘New File’.
Save it with a .html extension, for example index.html. That tells VS Code and the browser it’s an HTML file.

Writing basic HTML

In an empty HTML file, type ! and hit Tab. VS Code should expand that into a basic HTML structure, something like this:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>

</body>
</html>

Here’s what those bits are doing:

<!DOCTYPE html>: tells the browser we’re using HTML5.
<html>: the root element of the page.
<head>: information about the document (title, and later things like CSS links).
<title>: the title shown in the browser tab.
<body>: the content people actually see on the page.

Adding some content

Inside the <body> tags, add a heading and a paragraph:

<body>
    <h1>Welcome to my first HTML page</h1>
    <p>Hello there! This is my first HTML page.</p>
</body>

Viewing your page

To view it, right-click your HTML file in VS Code and choose ‘Open with Live Server’. That should open your default browser and show the page.

No Live Server? You can also open the .html file directly in a browser (File > Open, or drag it onto a browser window). Live Server just makes the refresh loop quicker.

Tweaking VS Code

VS Code is highly customisable. Themes, settings, keyboard shortcuts – poke around and set it up the way you like. You don’t need to get this perfect before writing HTML.

A quick note on HTML syntax

HTML is fairly forgiving, but good habits still matter. Close your tags, keep indentation consistent, and add comments where something isn’t obvious. Your future self will thank you.

Practice

The best way to learn this is to mess about with it. Try adding lists, images or tables and see how they render. Break things on purpose, then fix them.

Next up we’ll look more closely at the structure of an HTML document. For now, get the editor working and make sure you can see your page in a browser.