02. Your First HTML File

Introduction

Creating your first HTML file is a foundational step in web development. This guide walks you through the process of creating a basic HTML document, understanding its structure, and viewing it in a browser. By the end, you’ll have a working HTML file that demonstrates core concepts.

Prerequisites

Before creating your first HTML file, ensure you have:

A text editor installed (VS Code, Sublime Text, Notepad++, or any plain text editor)
A modern web browser (Chrome, Firefox, Safari, or Edge)
Basic file system knowledge (creating and saving files)

Creating Your First HTML File

Step 1: Open Your Text Editor

Launch your preferred text editor. For beginners, VS Code is recommended as it provides syntax highlighting and helpful extensions for web development.

Step 2: Create a New File

Create a new file in your text editor. You can do this by:

Clicking “File” → “New File”
Using the keyboard shortcut (Ctrl+N on Windows/Linux, Cmd+N on macOS)

Step 3: Write Basic HTML Structure

Type the following HTML code into your new file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML file.</p>
</body>
</html>

Step 4: Save the File

Save your file with a .html extension:

Click “File” → “Save As”
Choose a location (create a folder for your HTML projects)
Name the file index.html or my-first-page.html
Make sure the file extension is .html (not .txt)
Click “Save”

Important: The .html extension is crucial. Without it, browsers won’t recognize the file as an HTML document.

Understanding the Code

Let’s break down what each part of your HTML file does:

DOCTYPE Declaration

<!DOCTYPE html>

This tells the browser you’re using HTML5, the current standard. It must be the first line of your document.

HTML Element

<html lang="en">

The root element that wraps all content. The lang attribute specifies the language (English in this case), which helps screen readers and search engines.

Head Section

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>

Contains metadata about the document:

charset: Specifies character encoding (UTF-8 supports all characters)
viewport: Ensures proper mobile rendering
title: Sets the browser tab title

Body Section

<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML file.</p>
</body>

Contains the visible content:

h1: Main heading (largest heading)
p: Paragraph text

Viewing Your HTML File

Method 1: Direct File Opening

Navigate to the folder where you saved your HTML file
Double-click the file
It will open in your default web browser

Open your web browser
Press Ctrl+O (Windows/Linux) or Cmd+O (macOS)
Navigate to your HTML file
Click “Open”

Method 3: Drag and Drop

Open your web browser
Drag the HTML file from your file explorer into the browser window

Verifying Your Work

When you open your HTML file, you should see:

“Hello, World!” displayed as a large heading
“This is my first HTML file.” displayed as paragraph text
“My First HTML Page” in the browser tab title

If you see this, congratulations! You’ve successfully created your first HTML file.

Making Changes

One of the great things about HTML is that you can see changes immediately:

Edit your HTML file in the text editor
Save the file (Ctrl+S or Cmd+S)
Refresh the browser (F5 or Ctrl+R / Cmd+R)
Your changes will appear instantly

Try adding more content:

<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML file.</p>
    <h2>About Me</h2>
    <p>I'm learning HTML and web development.</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>

Common Issues and Solutions

File Opens as Text

Problem: The file opens in a text editor instead of a browser.

Solution: Right-click the file → “Open With” → Choose your browser, or change the file association.

Changes Don’t Appear

Problem: You edited the file but don’t see changes in the browser.

Solution: Make sure you saved the file, then refresh the browser (F5 or Ctrl+R / Cmd+R).

Special Characters Don’t Display Correctly

Problem: Characters like é, ñ, or emojis appear as boxes or question marks.

Solution: Ensure your file has <meta charset="UTF-8"> in the head section and save the file with UTF-8 encoding.

Next Steps

Now that you’ve created your first HTML file, you can:

Learn about HTML elements and tags
Add more content and structure
Style your page with CSS
Add interactivity with JavaScript
Explore semantic HTML elements

Best Practices

When creating HTML files:

Use meaningful file names: about.html is better than page1.html
Organize files: Create folders for different projects
Use index.html: This is the default file browsers look for
Validate your HTML: Use online validators to check for errors
Keep code organized: Use proper indentation and spacing