How to Create an HTML File (4 Ways, No Software Needed)

An HTML file is a plain text file whose name ends in .html. That is the entire definition. There is no special software, no compiling, no export step — if you can type text and save it with the right ending, you have made a web page.

Which raises the obvious question: why does the first attempt fail so often? Because the difficulty is not the HTML. It is the save dialog. Windows Notepad quietly appends .txt to your filename, and Mac TextEdit saves rich text by default, which a browser displays as a screenful of control codes. Both produce a file that looks right in the folder and refuses to work.

This guide gives you four ways to create an HTML file — starting with the one that takes about ten seconds and cannot hit either trap — plus the boilerplate to copy, and how to open the file once you have it.

If you already have HTML code, or you just want a working file to start from, the quickest route is to skip the text editor entirely. The FileNaut HTML File Generator takes pasted code and hands back a proper .html file. It runs entirely in your browser — nothing is uploaded to a server.

1. Open the HTML File Generator.
2. Paste your HTML into the left panel, or click Load sample to start from a working page.
3. Check the live preview on the right — it renders as you type.
4. Type a filename. You can leave the extension off; .html is added automatically if it is missing, so typing index gives you index.html.
5. Click Download. The file lands in your downloads folder, ready to open.

Two things worth knowing, both of which we verified on the live tool rather than assuming:

• The download is byte-for-byte what you typed. We pasted a 255-byte page containing an accented word and an emoji, downloaded it, and compared: 255 bytes out, identical, with Café 🚀 intact. The file is saved as UTF-8, so accents and emoji survive.
• Characters that are illegal in filenames are replaced with hyphens — \ / : * ? " < > | all become -, so a filename cannot silently fail to save.

One small catch: if you clear the filename box and leave only spaces, you get a file called .html with no name, which most systems treat as hidden. Type an actual name.

Notepad is already on every Windows machine and works fine — as long as you defeat its default behaviour, which is to add .txt to whatever you type.

1. Press Start, type Notepad, open it.
2. Paste or type your HTML.
3. Go to File → Save As.
4. 🔴 Change "Save as type" from "Text Documents (*.txt)" to "All Files (*.*)". This is the step everyone misses.
5. Set Encoding to UTF-8.
6. Name the file index.html — including the extension — and save.

Skip step 4 and Windows saves index.html.txt. In File Explorer it will appear as index.html, because Explorer hides known extensions by default, so the file looks completely correct and still opens as plain text in the browser. If your page is showing its own source code instead of rendering, this is almost always why.

To check: in File Explorer, open the View menu and tick File name extensions. Now you can see the truth, and you can rename the file to strip the .txt.

TextEdit has the same problem wearing different clothes. Its default document format is rich text, not plain text — so saving with a .html ending produces an RTF file with the wrong name on it. We confirmed what that yields: the saved file identifies as "Rich Text Format data, version 1", and a browser opening it shows the raw RTF control codes rather than your page.

1. Open TextEdit and create a new document.
2. 🔴 Go to Format → Make Plain Text (or press ⇧⌘T). The window loses its formatting toolbar — that is how you know it worked.
3. Type or paste your HTML.
4. File → Save, name it index.html.
5. If TextEdit asks whether to use .html or .txt, choose Use .html.

To make this permanent, open TextEdit → Settings → New Document and select Plain text. Every new document then behaves correctly and you never think about it again.

There is also a second TextEdit quirk to know about: when it opens an existing .html file, it tends to render the page instead of showing the code. Fix that in the same Settings panel under Open and Save — tick Display HTML files as HTML code instead of formatted text.

For anything beyond a one-off file, a real code editor is worth the five-minute install. VS Code is free on Windows, Mac and Linux; Sublime Text and Notepad++ work just as well.

1. Install the editor and open the folder you want to work in.
2. Create a new file and save it as index.html. No format menus, no hidden extensions — what you type is what you get.
3. In VS Code, type ! on the first line and press Tab. It expands into a complete HTML boilerplate instantly.

What you gain over Notepad: syntax colouring, tags that close themselves, and an error underlined the moment you make it rather than after you reload the page. If you are creating more than one HTML file, start here.

Prefer writing in Markdown and converting? That works too — write the content in the Markdown Editor, then run it through Markdown to HTML and paste the result into the file generator. Our Markdown to HTML guide covers the details.

Every HTML file needs the same small scaffold. Copy this one — it is complete, valid, and works in every browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>This is my first web page.</p>
</body>
</html>

What each line is actually doing, because copying without understanding is how small bugs become long afternoons:

• <!DOCTYPE html> — tells the browser to use modern standards mode. Leave it out and browsers fall back to a legacy compatibility mode where layouts subtly misbehave.
• lang="en" — declares the language. Screen readers use it to pick the right pronunciation, and search engines use it too.
• <meta charset="utf-8"> — the one that bites people. Without it, accented characters and emoji can render as é style mojibake. Keep it first inside <head>.
• <meta name="viewport"> — makes the page scale properly on phones. Omit it and mobile browsers render at desktop width and zoom out.
• <title> — the text in the browser tab and the clickable line in search results.
• <body> — everything a visitor actually sees.

That is a genuinely complete web page. Save it, open it, and you have a working site.

You do not need a web server, and you do not need to host anything. An HTML file opens directly from your hard drive.

• Double-click it. If your default browser is set, the page opens. The address bar will read file:///… rather than https:// — that is correct and expected.
• Right-click → Open With → your browser, if double-clicking opens an editor instead.
• Drag the file onto an open browser window. Works everywhere and needs no configuration.
• Press Ctrl+O (⌘O on Mac) in the browser and pick the file.

"Running" an HTML file is the same action as opening it — there is nothing to compile or start. HTML is not a programming language that executes; it is markup the browser reads and draws.

Editing is just as direct: right-click the file, Open With your text editor, change the code, save, and press F5 in the browser to reload. No rebuild step.

The one thing local files cannot do is talk to a server. If your page fetches data from an API or loads modules, some of that is blocked under file:/// for security reasons and you will need a local server. For a plain page with text, images, CSS and ordinary scripts, opening the file directly is all you need.

The fourth row deserves a note, because it catches people using any browser-based preview. We tested this on the live tool: a page containing <img src="logo.png"> resolves that relative path against the website you are previewing on, not against your eventual folder. In our test it tried to load https://filenaut.com/logo.png and came up empty. A broken image in a preview does not mean your HTML is wrong — download the file, put it next to logo.png, and it will work.

Same story for scripts. The preview pane is deliberately sandboxed, so JavaScript does not execute inside it — we confirmed this by previewing a script that rewrites a heading and watching the original text stay put, while the CSS on that same heading applied correctly. Styling previews accurately; scripts do not run until you open the downloaded file. That is a security feature, not a fault.

• Name your main page index.html. Web servers serve it automatically when someone visits a folder, so yoursite.com/about/ finds about/index.html without anyone typing a filename.
• Use lowercase filenames and no spaces. Windows ignores case; most web servers do not. A link to About.html that is really about.html works on your laptop and 404s the moment it is online. Use hyphens: contact-us.html.
• Keep one folder per project. HTML file at the top, images in images/, styles in css/. Relative paths then survive being moved or uploaded.
• .html and .htm are identical. The three-letter version is a leftover from a DOS-era eight-character limit. Prefer .html; the generator preserves .htm if you deliberately type it.
• Save early and reload often. Change the file, press F5. A tight loop finds mistakes while you still remember what you changed.
• Need a PDF of the finished page? Run it through HTML to PDF — the full guide is here.

An HTML file is plain text ending in .html. Any of these four routes gets you one: paste into the HTML File Generator and download; Notepad with "Save as type" set to All Files; TextEdit after Format → Make Plain Text; or a code editor such as VS Code.

Copy the boilerplate above, save it as index.html, double-click it, and you are looking at a web page you made. Everything after that — styling, images, more pages — is built on exactly that file.