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:
Learn HTML on Mimo
- 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:
CSS
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:
Bash
mkdir my-first-page
cd my-first-page
touch index.html
Windows PowerShell:
SQL
mkdirmy-first-page
cdmy-first-page
New-Itemindex.html
2) Add the basic HTML structure
Paste this into index.html:
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<metaname="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:
CSS
<h1>Hello, world!</h1>
To this:
CSS
<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
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="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
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>Links</title>
</head>
<body>
<h1>Favorite sites</h1>
<ahref="https://example.com">Visit Example</a>
<imgsrc="photo.jpg"alt="A sample photo"/>
</body>
</html>
Example 3: A simple layout with sections
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="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
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<linkrel="stylesheet"href="styles.css"/>
<scriptsrc="app.js"defer></script>
<title>With CSS and JS</title>
</head>
<body>
<buttonid="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
CSS
<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:
CSS
<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.htmlinto 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.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot