Your first HTML page

You need only two tools to write HTML: a code editor and a browser. In a few minutes you will have a working page on your computer and know how to look inside it.

Choose a code editor

A code editor is a text editor built for code. It colours the syntax, closes tags for you and spots typos. Any of these work well:

Visual Studio Code (free, Windows, macOS and Linux). This course assumes it, but the steps are the same elsewhere.
Zed, Sublime Text or WebStorm.

Avoid word processors such as Microsoft Word or Pages. They save formatting information that browsers cannot read.

On Windows, Notepad works in a pinch, but check that it saves as index.html and not index.html.txt. Turn on "File name extensions" in File Explorer so you can see the real file name.

Create a project folder

Make a folder for your work, for example html-course in your Documents folder. Open it in your editor: in VS Code, choose File, Open Folder.

Create a new file inside it called index.html. The name index.html is a convention: web servers show index.html when someone visits a folder without naming a file.

File naming rules that save trouble later:

Use lowercase letters, numbers and hyphens: about-us.html, not About Us.html.
Avoid spaces. They become %20 in URLs.
End every HTML file with .html.

Write the page

Type this into index.html. Typing rather than pasting helps you remember the structure.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, web</h1>
  <p>This is my first HTML page. I wrote it by hand.</p>
  <p>Next I will learn about <a href="https://developer.mozilla.org/">MDN Web Docs</a>.</p>
</body>
</html>

Save the file. You do not need to understand every line yet. Lesson 4 explains the skeleton and lesson 5 explains the head. For now, notice that:

The visible content lives inside body.
h1 is the main heading, p is a paragraph and a is a link.
Most elements have an opening tag like <p> and a closing tag like </p>.

In VS Code, typing ! on the first line of an empty .html file and pressing Tab inserts a document skeleton. It is a handy shortcut once you know what each line does.

Open it in a browser

Find the file in your file manager and double-click it, or drag it onto a browser window. The address bar shows something like:

Plain text

file:///C:/Users/you/Documents/html-course/index.html

The file:// scheme means the browser is reading straight from your disk. No server is involved. That is fine for plain HTML, CSS and most JavaScript. Some features, such as JavaScript modules and certain APIs, need a local server, which you can add later with an editor extension such as Live Server or a command like npx serve.

The edit and refresh loop

Change the heading to Hello, world, save, and refresh the browser (F5, or Cmd+R on macOS). The page updates. This loop of edit, save and refresh is how you will work for the rest of the course.

If a change does not appear:

Check you saved the file. Most editors show a dot on the tab when there are unsaved changes.
Check you are viewing the same file you edited. Look at the path in the address bar.
Try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to bypass the cache.

View the source

Right-click the page and choose View Page Source (or press Ctrl+U, or Cmd+Option+U in Chrome on macOS). You see the exact text the browser received. For your file, it matches what you typed.

On real websites, view source is a quick way to see the HTML a server sends, before any JavaScript has changed it.

Inspect the page with DevTools

Every major browser includes developer tools. Open them with F12, Ctrl+Shift+I on Windows and Linux, or Cmd+Option+I on macOS. In Safari, first enable Show features for web developers in Settings, Advanced.

The Elements panel (called Inspector in Firefox) shows the DOM, the tree the browser built from your HTML. Try this:

Right-click the heading on the page and choose Inspect. DevTools opens with the h1 highlighted.
Hover over elements in the panel. The browser highlights each one on the page and shows its size.
Double-click the text inside the h1 in the panel and change it. The page updates instantly.
Refresh the page. Your change is gone.

Edits in DevTools change the live DOM in memory, not your file. They are perfect for experiments. When something works, copy the change back into your editor and save it.

Source versus DOM

View source and the Elements panel can differ. View source shows the original text. The Elements panel shows the DOM after the browser fixed any errors and after JavaScript made changes. Try removing the closing </p> from the first paragraph, saving and refreshing: view source shows your mistake, while the Elements panel shows the paragraph closed for you.

The Console

The Console tab shows errors and warnings, such as a missing image or a script that failed. Check it whenever something does not work as expected. You can also type JavaScript there, for example document.title, and press Enter to see the page title.

Common mistakes

Problem	Likely cause	Fix
Browser shows the tags as text	File saved as `.txt` or opened in the editor's preview	Save as `.html` and open it in a browser
Changes do not appear	File not saved, or a different file open	Save, check the path in the address bar
Strange characters such as `Ã©`	Missing `charset`	Keep `<meta charset="utf-8">` and save the file as UTF-8
Link does nothing	Typo in the `href`	Inspect the link and check the attribute value

Summary

Write HTML in a code editor and save it with a .html extension.
Open the file in a browser and use edit, save and refresh as your working loop.
View source shows what the browser received; the Elements panel shows the DOM it built.
DevTools edits are temporary. Copy anything you want to keep back into your file.
Check the Console when something goes wrong.

What you will learn

Before you start