Creating Your First HTML File

by

Creating your first HTML file is the first practical step toward building a webpage. You do not need a complicated development environment or advanced programming knowledge to get started.

All you need is a text editor or code editor, such as Visual Studio Code, and a web browser.

You will create a file with the .html extension, write some HTML code inside it, save the file, and then open it in a browser.

By the end of this tutorial, you will have a working HTML webpage.

What You Need

Before creating your first HTML file, make sure you have:

  • A computer or laptop
  • A text editor or code editor
  • A web browser
  • A folder for your HTML project

You can use Notepad, but a code editor such as Visual Studio Code provides useful features for writing HTML.

A basic understanding of HTML Syntax will also help you understand the code you write.

Create a Project Folder

Start by creating a folder for your website.

For example:

my-first-website

You can create the folder on your Desktop, Documents folder, or another convenient location.

A simple project might initially contain only one file:

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

As your website grows, you can add CSS, JavaScript, images, and additional HTML pages.

Open Your Code Editor

Open your preferred text or code editor.

For example, if you are using Visual Studio Code:

  1. Open Visual Studio Code.
  2. Select File → Open Folder.
  3. Select your my-first-website folder.
  4. Open the folder in the Explorer panel.

You can then create your HTML file inside the project.

Create the HTML File

Create a new file and name it:

index.html

The .html extension tells the browser that the file contains HTML.

The name index.html is commonly used as the main page of a website.

Your project should now look like:

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

Write Your First HTML Code

Open index.html and enter:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First HTML Page</title>
</head>

<body>

    <h1>Hello World!</h1>

    <p>Welcome to my first HTML webpage.</p>

</body>

</html>

Save the file.

This is a complete basic HTML document.

The elements used here form the basic structure of an HTML page. The <html> element contains the document, while <head> contains information about the page and <body> contains the content displayed to visitors.

Understanding the Code

Let’s look at each part of the document.

The <!DOCTYPE html> Declaration

The first line is:

<!DOCTYPE html>

It tells the browser that the document uses the HTML standard.

It is a document type declaration, not an HTML element.

The <html> Element

The main HTML document is contained inside:

<html lang="en">

The lang attribute identifies the primary language of the document.

The closing tag is:

</html>

The <head> Element

The <head> section contains information about the document that is not normally displayed as the main page content.

For example:

<head>
    <title>My First HTML Page</title>
</head>

The <title> element defines the title shown in the browser tab.

The <body> Element

The <body> contains the content displayed on the webpage.

For example:

<body>

    <h1>Hello World!</h1>

    <p>Welcome to my first HTML webpage.</p>

</body>

The heading and paragraph will appear in the browser window.

This separation between document information and visible page content is an important part of HTML Document Structure.

Save Your HTML File

After entering the code, save the file.

In most code editors, you can use:

Ctrl + S

Make sure the filename is:

index.html

and not:

index.html.txt

If you are using Notepad, select All Files when saving and enter the .html extension manually.

Open the HTML File in a Browser

Now locate your project folder:

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

Double-click index.html.

Your browser should open the page.

You should see something similar to:

Hello World!

Welcome to my first HTML webpage.

The browser has read your HTML code and rendered it as a webpage.

Understanding the Browser Result

The browser does not display the HTML tags themselves.

For example, you wrote:

<h1>Hello World!</h1>

The browser uses the <h1> element to determine how the content should be displayed.

You see:

Hello World!

rather than:

<h1>Hello World!</h1>

The tags provide structure and meaning to the content.

Understanding the difference between tags and the complete elements is covered in HTML Tags.

Add More Content

You can now add more HTML elements to your page.

For example:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First HTML Page</title>
</head>

<body>

    <h1>Welcome to Web4Learners</h1>

    <h2>Learn HTML</h2>

    <p>
        HTML is used to structure webpages.
    </p>

    <p>
        You can create webpages using simple HTML files.
    </p>

</body>

</html>

Save the file and refresh your browser.

The new content will appear on the page.

Add a Link

You can add a hyperlink using the <a> element.

For example:

<a href="https://example.com">
    Visit Example
</a>

A complete example could be:

<h1>My Website</h1>

<p>
    Visit
    <a href="https://example.com">Example Website</a>.
</p>

The href attribute specifies the destination of the link.

Add an Image

You can also add an image using the <img> element.

For example:

<img src="image.jpg" alt="A sample image">

If the image is stored inside an images folder:

my-first-website/
│
├── index.html
└── images/
    └── image.jpg

Then use:

<img src="images/image.jpg" alt="A sample image">

The src attribute specifies the image location, while alt provides alternative text.

Add a List

HTML can also be used to create lists.

For example:

<h2>What I Am Learning</h2>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

The browser will display the items as a bulleted list.

Understanding HTML Attributes

As you create your first HTML pages, you will frequently use attributes.

For example:

<a href="https://example.com">Visit Website</a>

Here, href is an attribute.

Another example:

<img src="image.jpg" alt="Sample Image">

Here, src and alt are attributes.

Attributes provide additional information about HTML elements, which is why understanding HTML Attributes is an important next step when building webpages.

Make a Change and Refresh

One of the easiest ways to learn HTML is to experiment with your file.

Change:

<h1>Hello World!</h1>

to:

<h1>My First Website</h1>

Save the file:

Ctrl + S

Then refresh the browser.

The browser will display:

My First Website

This simple process is the foundation of HTML development:

Write HTML
    ↓
Save File
    ↓
Open in Browser
    ↓
View Result
    ↓
Make Changes
    ↓
Save Again
    ↓
Refresh Browser

Create a Simple Personal Webpage

Now let’s create a slightly more complete first webpage.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First Website</title>
</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>
        Hello! My name is Alex.
    </p>

    <h2>About Me</h2>

    <p>
        I am learning HTML and web development.
    </p>

    <h2>My Skills</h2>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <h2>Contact</h2>

    <p>
        <a href="mailto:example@example.com">
            Send me an email
        </a>
    </p>

</body>

</html>

This example demonstrates headings, paragraphs, lists, links, attributes, and the basic HTML document structure.

Add Comments to Your First HTML File

Comments can help organize your code.

For example:

<!-- Main Heading -->
<h1>My First Website</h1>

<!-- About Section -->
<h2>About Me</h2>
<p>I am learning HTML.</p>

Comments are not displayed as webpage content.

They are useful for identifying different sections of your HTML source code.

Organizing Your Project

Once your first HTML file works, you can organize your website into multiple files.

For example:

my-first-website/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
└── images/
    └── logo.png

This structure allows you to separate different types of files and keep the project manageable.

Common Mistakes

Saving the File as .txt

Make sure your file is:

index.html

not:

index.html.txt

A .txt file will not normally be treated as an HTML webpage when opened.

Forgetting the Doctype

Start your document with:

<!DOCTYPE html>

This establishes the document type for the browser.

Forgetting to Save

After making changes, save your HTML file before checking the browser.

Use:

Ctrl + S

Forgetting to Refresh

If you opened the HTML file directly in a browser, refresh the page after saving changes.

Incorrectly Nesting Elements

HTML elements should be properly nested.

Correct:

<p>
    This is <strong>important</strong> text.
</p>

Incorrect:

<p>
    This is <strong>important</p>
</strong>

Proper nesting helps keep your HTML structure valid and predictable.

Using Incorrect File Paths

If an image is located at:

images/logo.png

your HTML should reference:

<img src="images/logo.png" alt="Logo">

A wrong path can prevent the browser from finding the file.

Best Practices

  • Start every HTML document with <!DOCTYPE html>.
  • Use <html lang="en"> or the appropriate language.
  • Give every page a meaningful <title>.
  • Use proper HTML structure.
  • Save files with the .html extension.
  • Use lowercase HTML element and attribute names.
  • Keep your code properly indented.
  • Use meaningful filenames.
  • Use descriptive alt text for images.
  • Keep related project files organized.
  • Save your work frequently.
  • Test your HTML in a browser after making changes.
  • Keep HTML elements properly nested.

FAQs

How do I create my first HTML file?

Open a text or code editor, create a new file named index.html, write your HTML code, save the file, and open it in a web browser.

What should my first HTML file be called?

index.html is a common filename for the main page of a website.

Do I need VS Code to create an HTML file?

No. You can use Notepad or another text editor. VS Code simply provides additional features that make writing HTML easier.

What should I write inside my first HTML file?

Start with a basic HTML document:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First Page</title>
</head>

<body>

    <h1>Hello World!</h1>

</body>

</html>

How do I open an HTML file?

Locate the .html file on your computer and double-click it. It should open in your default web browser.

Why is my HTML file opening as text?

Check the file extension. If the file is named index.html.txt, it is a text file rather than an HTML file. Rename or save it correctly as index.html.

Can I create an HTML file without the internet?

Yes. You can create and test basic HTML files locally without an internet connection.

How do I see changes after editing HTML?

Save the HTML file and refresh the browser. The updated webpage should then appear.

Can I add CSS and JavaScript to my first HTML file?

Yes. You can later connect CSS and JavaScript files to your HTML document as your website becomes more advanced.

Can one HTML file contain a complete webpage?

Yes. A single HTML file can contain the complete structure and content of a basic webpage. Larger websites usually use multiple HTML, CSS, JavaScript, image, and other resource files.