Your First HTML Page
Time to stop reading about HTML and actually write some. This page walks through creating a real file, understanding every line of a minimal boilerplate, and viewing it in a browser — including live-reload so your workflow feels modern from day one.
Step 1: create the file
Create a new folder anywhere on your computer, for example <code>my-first-site</code>.
Open that folder in VS Code (File → Open Folder).
Create a new file named exactly <code>index.html</code> — the name <code>index.html</code> is a convention that most servers treat as the default page for a folder.
! and press Tab. VS Code's Emmet integration expands it into the exact boilerplate below automatically.The minimal HTML5 boilerplate
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Line by line
<code><!DOCTYPE html></code> — tells the browser to render this page in modern "standards mode" using the HTML5 rules. It must be the very first line.
<code><html lang="en"></code> — the root element that wraps the entire document. The <code>lang</code> attribute declares the page's language, which helps screen readers and search engines.
<code><head></code> — a container for information about the page that isn't shown directly on the page itself: character encoding, the title, and links to CSS or scripts.
<code><meta charset="UTF-8" /></code> — tells the browser which character encoding to use when interpreting the file's bytes, so accented letters, emoji, and symbols display correctly.
<code><meta name="viewport" ...></code> — tells mobile browsers to render the page at the device's actual width instead of zoomed out as a "desktop" page. Essential for responsive design later.
<code><title>My First Page</title></code> — the text shown in the browser tab and used as the default bookmark name.
<code><body></code> — everything visible on the page goes here: text, images, links, forms, and so on.
<code><h1>Hello, World!</h1></code> — the actual visible content: a top-level heading.
Step 2: save and open in a browser
Save the file (Ctrl+S / Cmd+S).
Find <code>index.html</code> in your file explorer and double-click it — it opens directly in your default browser using a <code>file://</code> address.
You should see a browser tab titled "My First Page" showing the text "Hello, World!" in large, bold letters.
Browser tab title: My First Page Page content: Hello, World! (large heading text)
Viewing the source
Right-click anywhere on the page and choose View Page Source (or press Ctrl+U / Cmd+Option+U). This opens a read-only tab showing the exact HTML the browser received — a great way to peek at how any website on the internet is built.
Step 3: the live-reload workflow
Opening the file manually every time you make a change works, but it's slow. With the Live Server extension installed (see the previous page):
Right-click <code>index.html</code> in VS Code's file explorer.
Choose "Open with Live Server."
Your browser opens the page at a local address like <code>http://127.0.0.1:5500</code>.
Edit the text inside <code><h1></code>, save the file, and watch the browser update automatically — no manual refresh needed.
Hello, World! to your own name and save. If you're using Live Server, the page updates instantly. This tight feedback loop — edit, save, see the result — is how you'll work for the rest of this series.Common first-page mistakes
Forgetting the <code><!DOCTYPE html></code> line, which can push older browsers into "quirks mode" with unpredictable rendering (covered in depth on the next page).
Saving the file with the wrong extension, like <code>index.html.txt</code> — check your OS is not hiding known file extensions.
Nesting content directly inside <code><html></code> instead of inside <code><body></code>.