How to Create an HTML File

What you’ll build or solve

You’ll create a working HTML file that loads in a browser and displays content.

When this approach works best

Creating an HTML file works best when you want to:

• Start a simple webpage from scratch for practice or a small project.
• Build a static page like a personal profile, landing page, or README-style page.
• Test HTML snippets quickly before adding CSS or JavaScript.

This is a bad idea when you need server-side routing or a full app framework. Start with plain HTML first, then move to a framework when you hit real limits.

Prerequisites

• A text editor (VS Code or similar)
• A web browser (Chrome, Firefox, Safari, or Edge)

No coding experience beyond basic typing is required.

Step-by-step instructions

1) Create a new file named index.html

Create a new file in your editor and save it as index.html.

Option A: Create it in a project folder (most common)

Example folder structure:

my-first-page/
  index.html

What to look for: your editor should show the file name ending in .html. If you are on Windows, make sure the file is not accidentally named index.html.txt.

Option B: Create it from the command line

macOS/Linux:

mkdir my-first-page
cd my-first-page
touch index.html

Windows PowerShell:

mkdir my-first-page
cd my-first-page
New-Item index.html

2) Add the basic HTML structure

Paste this into index.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, world!</h1>
    <p>This page was made with HTML.</p>
  </body>
</html>

What to look for: the <title> text shows up in the browser tab, not on the page itself.

3) Open and verify the file in a browser

Open index.html in a browser. Then make a small change, save, and refresh.

Change this:

<h1>Hello, world!</h1>

To this:

<h1>Hello, HTML!</h1>

What to look for: if the browser does not update, you may have unsaved changes or you opened a different file than the one you edited.

Examples you can copy

Example 1: A simple profile page

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Profile</title>
  </head>
  <body>
    <h1>Amina</h1>
    <p>Learning front-end development.</p>
  </body>
</html>

Example 2: A basic page with a link and an image

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Links</title>
  </head>
  <body>
    <h1>Favorite sites</h1>
    <a href="https://example.com">Visit Example</a>
    <img src="photo.jpg" alt="A sample photo" />
  </body>
</html>

Example 3: A simple layout with sections

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
  </head>
  <body>
    <header>
      <h1>My Site</h1>
    </header>

    <main>
      <section>
        <h2>About</h2>
        <p>A short intro goes here.</p>
      </section>

      <section>
        <h2>Projects</h2>
        <ul>
          <li>Portfolio page</li>
          <li>Landing page</li>
          <li>Product card</li>
        </ul>
      </section>
    </main>

    <footer>
      <small>© 2026</small>
    </footer>
  </body>
</html>

Example 4: HTML file that links CSS and JavaScript

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css" />
    <script src="app.js" defer></script>
    <title>With CSS and JS</title>
  </head>
  <body>
    <button id="buy">Buy</button>
  </body>
</html>

Common mistakes and how to fix them

Mistake 1: Saving the file with the wrong extension

What you might do

Save as index.html.txt.

Why it breaks

The browser treats it like a text file, not an HTML page.

Corrected approach

Enable file extensions and rename it to index.html.

Mistake 2: Missing closing tags or broken nesting

What you might do

<body>
  <h1>Hello
  <p>Text</p>
</body>

Why it breaks

Browsers try to guess what you meant, but the layout can become unpredictable.

Corrected approach

Close tags properly:

<body>
  <h1>Hello</h1>
  <p>Text</p>
</body>

Troubleshooting

If the page shows raw code instead of a webpage, do this:

• Check the file extension. It should be .html, not .txt.

If nothing changes after you edit, do this:

• Save the file, then refresh the browser tab.

If you opened the wrong file, do this:

• Right-click the file and open it again, or drag the correct index.html into the browser.

If images do not load, do this:

• Confirm the image file path matches where the image is stored.

If characters look broken, do this:

• Make sure you have <meta charset="utf-8" /> in the <head>.

Quick recap

• Create a file named index.html.
• Add the basic HTML structure with <!doctype html>, <head>, and <body>.
• Open the file in a browser, then save and refresh to see changes.
• Fix extension and nesting issues first if something looks wrong.