HTML Get Started

What you need

Two free tools:

• A web browser: Chrome, Firefox, Safari or Edge.
• A code editor: we recommend Visual Studio Code (VS Code), free for Windows, macOS and Linux. It colours your code, closes tags for you and spots mistakes.

Notepad (Windows) also works. Don't use a word processor such as Word: it adds hidden formatting and curly quotes that break HTML.

Create your first file, step by step

1. Create a folder called my-website (for example on your Desktop).
2. Open VS Code and choose File → Open Folder, then pick my-website.
3. Choose File → New File, and save it as index.html. index.html is the conventional name for a home page: web servers show it automatically when someone visits a folder.
4. Type or paste the page below, then save (Ctrl+S, or Cmd+S on a Mac).
5. Open your folder and double-click index.html. It opens in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello</title>
</head>
<body>
  <h1>Hello from index.html!</h1>
  <p>Edit this text, save, and refresh the browser.</p>
</body>
</html>

Edit, save, refresh

This is the routine web developers use all day:

1. Edit the file in your editor.
2. Save it.
3. Refresh the browser (F5, or Cmd+R on a Mac).

Two time-savers in VS Code:

• Type ! in an empty .html file and accept the suggestion with Enter or Tab to get the whole page skeleton.
• The Live Server extension refreshes the browser for you every time you save.

Try it here first

Every example in this tutorial has a Run button and can be edited right on the page, so you can experiment without setting anything up. When something works, copy it into your own file.

View source and DevTools

Right-click any web page and choose View Page Source to see its HTML, or Inspect to open the browser's developer tools and explore the page's elements. It's the best way to learn how other sites are built.

Common beginner problems

• The file is called index.html.txt. Windows hides file extensions; turn them on in File Explorer (View → Show → File name extensions) and rename the file.
• Nothing changes in the browser. Save the file, then refresh. Check you opened the same file you're editing.
• The page shows the code as text. The file isn't saved with the .html extension.
• Strange characters such as é. Add <meta charset="utf-8"> in the head and save the file as UTF-8 (VS Code does this by default).

Publishing

To put a site online, upload your files to a host. Free options for static sites include GitHub Pages, Netlify and Cloudflare Pages.