How to Create and Save Your First HTML File

What you're actually creating when you make an HTML file

An HTML file is a plain text document with a .html extension at the end of its name. Your computer reads that extension and knows to open it in a web browser instead of a text editor. The file itself contains instructions written in HTML tags — those are the words in angle brackets like <p> and <h1> — that tell the browser what to display and how to arrange it on the page.

You do not need special software to create an HTML file. A basic text editor like Notepad (Windows), TextEdit (Mac), or gedit (Linux) works perfectly. The only requirement is that you save the file with the .html extension instead of .txt. Once you do that, double-clicking the file will open it in your default web browser, and you will see a formatted page instead of raw code.

Key Takeaways

HTML files are plain text documents saved with a .html extension, which tells your computer to open them in a web browser.
You can create an HTML file using any text editor — Notepad, TextEdit, gedit, or VS Code — without purchasing special software.
The file must start with <!DOCTYPE html> and include opening and closing tags like <html>, <head>, and <body> for the browser to read it correctly.
After writing your HTML code, save the file with a .html extension, then open it in your browser by double-clicking it or dragging it into a browser window.

Creating your first HTML file on Windows

Open Notepad by pressing the Windows key, typing "notepad", and pressing Enter. A blank text window will appear. Type or paste your HTML code into this window — start with the basic structure shown below, which every HTML file needs:

<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first HTML page.</p> </body> </html>

Once you have typed this code, go to File and click Save As. A dialog box will open. In the "File name" field, type a name for your file followed by .html — for example, mypage.html or index.html. Make sure the "Save as type" dropdown shows "All Files" rather than "Text Documents (.txt)". Choose a folder where you want to save it, then click Save. Your file is now created.

Creating your first HTML file on Mac

Open TextEdit by pressing Command + Space, typing "textedit", and pressing Enter. A blank document will appear. Before you type any code, you must change the format from rich text to plain text. Go to the Format menu and click "Make Plain Text". This step is important — if you skip it, your file will not work correctly in a browser.

Now type or paste your HTML code into the document using the same basic structure shown above. When you are ready to save, press Command + S. A dialog box will open. In the "Save As" field, type your filename with the .html extension — for example, mypage.html. Make sure the "Plain Text Encoding" dropdown is set to UTF-8. Choose where you want to save the file and click Save.

Using a code editor instead of a basic text editor

If you plan to write HTML regularly, a code editor like Visual Studio Code (free) or Sublime Text makes the work easier. These programs highlight your HTML tags in different colors so mistakes stand out, and they auto-complete closing tags when you type opening ones. You can download Visual Studio Code from code.visualstudio.com at no cost.

In Visual Studio Code, create a new file by pressing Ctrl + N (Windows) or Command + N (Mac). Type your HTML code, then press Ctrl + S or Command + S to save. When the save dialog appears, type your filename with the .html extension and choose where to save it. The process is the same as with Notepad or TextEdit — the main difference is that the editor helps you write cleaner code.

Opening your HTML file in a web browser

Once your file is saved with the .html extension, open it in a browser in one of two ways. The easiest is to find the file in your file explorer (Windows) or Finder (Mac), then double-click it. Your default web browser will open and display the page. Alternatively, open your browser first, then drag and drop the HTML file into the browser window — the page will load immediately.

If the file does not open in a browser and instead opens in a text editor, the file was saved with the wrong extension. Go back to your text editor, use Save As again, and make absolutely sure the filename ends with .html and not .txt.

Understanding the basic HTML structure every file needs

Every HTML file should include the same foundational tags, even if you only plan to write a few lines of content. The <!DOCTYPE html> tag at the very top tells the browser this is an HTML5 file. The <html> tag wraps everything else. Inside that, the <head> section contains information about the page — like the title that appears in the browser tab — while the <body> section contains everything the visitor actually sees on the page.

You can add more content inside the body tags using tags like <h1> for headings, <p> for paragraphs, <a> for links, and <img> for images. Each opening tag like <p> must have a matching closing tag like </p>. If you forget a closing tag, the browser may display your page incorrectly or not at all.

Saving changes and viewing updates in your browser

After you create and save your HTML file, you can edit it anytime by opening it in your text editor again. Make your changes, save the file (Ctrl + S or Command + S), then switch to your browser and press F5 or Command + R to refresh the page. The browser will reload your file and show the updated version.

Keep your text editor and browser open side by side while you work. This way you can make a change, save it, refresh the browser, and immediately see the result without switching windows. This workflow helps you learn HTML faster because you see the impact of each change right away.

Frequently Asked Questions

Can I create an HTML file on my phone or tablet?

Yes, but it is awkward. You need a text editor app that saves files with custom extensions — most phone note apps do not. On Android, try apps like QuickEdit or Jota+. On iPad, use a code editor app like Koduo or Textastic. The process is the same: write your code, save with a .html extension, then open the file in your mobile browser.

What is the difference between .html and .htm?

Both extensions work identically. The .html extension is more common and is what you should use. The .htm extension exists because older Windows systems limited filenames to three-character extensions, but that limitation no longer applies. Stick with .html for consistency.

Do I need to be online to create and view an HTML file?

No. HTML files work completely offline. You can create them, save them, and view them in your browser without an internet connection. This is useful for learning HTML or building pages locally before uploading them to a web server.

What happens if I save my HTML file as .txt by mistake?

The file will open in a text editor instead of a browser, and you will see the raw code rather than the formatted page. To fix this, open the file in your text editor, go to File > Save As, and change the filename to end with .html instead of .txt. Save it again, and it will now open in your browser.

Can I have spaces or special characters in my HTML filename?

Spaces work but are not recommended — use hyphens or underscores instead (like my-page.html or my_page.html). Avoid special characters like @, #, %, and &. Stick to letters, numbers, hyphens, and underscores to prevent problems when you eventually upload the file to a web server.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.