Your First HTML File

Stop reading, start building. Here's exactly how to create, write, and view your first real HTML file — step by step, nothing skipped.

What You Need

To write and view HTML, you need exactly two things:

  • A text editor — a program that lets you write plain text (not Word or Google Docs — those add invisible formatting)
  • A web browser — Chrome, Firefox, Safari, or Edge (you already have one)

That's it. No internet connection required to view local files. No installations beyond a text editor.

Setting Up VS Code (Recommended)

VS Code (Visual Studio Code) is a free, beginner-friendly code editor made by Microsoft. It's also what most professional developers use, so learning it now means you'll be comfortable with a real tool from the start.

  1. Go to code.visualstudio.com in your browser.
  2. Download the version for your operating system (Windows, Mac, or Linux).
  3. Install it like any other program.
  4. Open it. You'll see a welcome screen — you can close that tab.

If you'd rather start immediately without installing anything, you can use Notepad (Windows) or TextEdit (Mac — you must switch it to plain text mode via Format → Make Plain Text). The experience is worse, but it works.

💡 Install the Live Server extension

Once you have VS Code, install the "Live Server" extension by Ritwick Dey. In VS Code, click the Extensions icon on the left sidebar (or press Ctrl+Shift+X / Cmd+Shift+X), search "Live Server", and install it. This lets you right-click your HTML file in VS Code and choose "Open with Live Server" — your page will automatically reload in the browser every time you save. It's a huge quality-of-life improvement.

Creating Your First File

Let's build a real page together. Follow these steps exactly:

  1. Create a new folder on your Desktop (or anywhere) called my-first-site.
  2. Open VS Code. Go to File → Open Folder and open that folder.
  3. In the Explorer panel on the left, click the "New File" icon and name the file index.html.
  4. The file opens in the editor on the right. Click in the editor area.
📌 Why name it index.html?

By convention, the main page of any website or folder is called index.html. When a browser or web server is told to open a folder rather than a specific file, it automatically looks for index.html inside it. It's not a rule you have to follow for local files, but it's a habit worth building from the start.

The Boilerplate: Your Starting Template

Every HTML page starts with the same basic structure. Developers call this the boilerplate — standard code that goes at the top of every file without needing to think about it. Here it is:

<!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>
    <p>This is my first HTML page.</p>

  </body>
</html>

Type this into your index.html file. Don't copy-paste — typing it builds muscle memory far faster. Let's go through every line:

  • <!DOCTYPE html> — not a tag. A declaration that tells the browser: "this file uses modern HTML5 rules, not old HTML 3 or 4 rules." Always goes first, always exactly like this.
  • <html lang="en"> — the root element. Every other element lives inside it. The lang="en" attribute tells search engines and screen readers the page is in English.
  • <head> — a container for invisible information about the page. Nothing inside <head> shows up in the browser window.
  • <meta charset="UTF-8"> — tells the browser which character set to use. UTF-8 supports virtually every character in every language, including emoji. Without this, special characters can appear as garbled symbols.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — tells mobile browsers not to zoom out and show the page tiny. Without this, your page will look like a shrunken desktop page on a phone.
  • <title>My First Page</title> — the text that appears on the browser tab. Not visible on the page itself.
  • </head> — closes the head section.
  • <body> — everything between <body> and </body> is what the visitor sees on screen.
  • <h1>Hello, World!</h1> — a top-level heading. The most visually prominent heading on the page.
  • <p>This is my first HTML page.</p> — a paragraph of text.
  • </body> — closes the body section.
  • </html> — closes the root element. Always the last line.

Viewing Your Page in a Browser

Now let's see it:

  • If you installed Live Server: Right-click index.html in VS Code's file explorer → "Open with Live Server." Your browser opens automatically.
  • If you didn't: Save the file (Ctrl+S / Cmd+S), then find the file in your file explorer (Finder on Mac, File Explorer on Windows) and double-click it. It opens in your browser.

You should see "Hello, World!" as a large heading and "This is my first HTML page." as smaller text below it. Congratulations — you built a web page.

VS Code Shortcut: Emmet

VS Code has a built-in tool called Emmet that can generate the entire boilerplate for you instantly. Click inside an empty .html file, type a single exclamation mark !, and press Tab. VS Code generates the full boilerplate automatically.

This is a shortcut — use it once you understand what each line means. Don't use it as a way to skip learning what the boilerplate does.

Making Changes and Seeing Them

The development workflow is simple:

  1. Make a change in VS Code.
  2. Save the file (Ctrl+S / Cmd+S).
  3. If using Live Server: the browser updates automatically. If not: switch to the browser and press F5 or Ctrl+R / Cmd+R to reload.
  4. See the result. Repeat.

Try it now: change Hello, World! to your name. Save. Reload. See your name appear as the heading.

File Naming Rules

Bad file names cause real problems on web servers. Follow these rules from the start:

  • Lowercase only. about.html not About.html. Servers are often case-sensitive; your computer might not be, leading to bugs you'll only discover after uploading.
  • No spaces. Use hyphens instead. my-page.html not my page.html. Spaces in URLs become ugly %20 codes.
  • No special characters. Stick to letters, numbers, and hyphens.
  • Always use the .html extension. Without it, the browser won't know to treat the file as HTML.
⚠ Common beginner mistakes
  • Saving the file as index.html.txt — this happens if your OS shows file extensions and you're using Notepad. Make sure the file is actually .html not .html.txt.
  • Opening the wrong file — if you have multiple HTML files open and keep refreshing the wrong browser tab.
  • Forgetting to save before refreshing — the browser shows the last saved version, not what's in the editor right now.

Your Folder Structure

Right now your project folder looks like this:

my-first-site/
└── index.html

As you build more complex sites you'll add more files. A typical small site might look like:

my-first-site/
├── index.html
├── about.html
├── contact.html
├── style.css
├── script.js
└── images/
    ├── logo.png
    └── hero.jpg

Each HTML file is a separate page. The images/ folder holds pictures. You'll link your CSS and JS files from inside HTML. You'll build all of this over the course of these lessons.

Interview Questions

Why is the main HTML file usually called index.html?

By convention, web servers automatically serve index.html when a directory is requested without specifying a filename. It's the "default" page for any folder.

What does the charset="UTF-8" meta tag do?

It tells the browser which character encoding to use when interpreting the file. UTF-8 supports virtually all characters in all languages, so special characters, accented letters, and emoji display correctly.

What does the viewport meta tag do?

It instructs mobile browsers to render the page at the device's actual screen width rather than zooming out to show a desktop layout. Without it, mobile users see a tiny, unreadable desktop page.

✏️ Exercise

Create your index.html file with the full boilerplate. Then add the following inside the <body>: an <h1> with your name, an <h2> that says "About Me", a <p> with two sentences about yourself, an <h2> that says "My Favourite Things", and an unordered list (<ul>) with three items (<li>). View it in your browser.

🧠 Quiz

1. What goes inside the <head> vs the <body>?

The <head> holds invisible metadata: the page title, character set declaration, viewport settings, and links to CSS and JS files. The <body> holds all visible content: headings, paragraphs, images, links, etc.

2. What does Emmet's ! shortcut do in VS Code?

Pressing ! followed by Tab in an empty HTML file generates the entire boilerplate structure automatically — DOCTYPE declaration, html, head, meta tags, title, and body.

3. Why should file names be lowercase with no spaces?

Web servers are often case-sensitive, meaning About.html and about.html are different files. Spaces in file names become %20 in URLs, which is ugly and error-prone. Lowercase hyphenated names are universally safe.

🚀 Mini Challenge

Create a second page in your project called about.html with the same boilerplate structure. Give it a different <title> and <h1>. Then, in your index.html, add a link to it: <a href="about.html">Go to About page</a>. Click the link in your browser and make sure it takes you to the about page. You just built a multi-page website.

Summary

  • You need only a text editor and a browser to write HTML.
  • VS Code with the Live Server extension is the recommended setup.
  • Every HTML file starts with the same boilerplate: DOCTYPE, html, head (with charset and viewport meta), title, and body.
  • The workflow is: write → save → view → repeat.
  • Use lowercase file names with hyphens instead of spaces.

Related Topics