An HTML file is a plain text document with a .html extension that your browser reads and displays as a web page

You do not need special software. Open Notepad (on Windows), TextEdit (on Mac), or any plain text editor. Type your HTML code, then save the file with a name ending in .html — for example, index.html or mypage.html. When you double-click that file, your browser opens it and shows you the rendered page.

The key is saving as plain text, not as a formatted document. If you use Microsoft Word or Google Docs without converting to plain text first, the file will contain hidden formatting that breaks how the browser reads it.

Key Takeaways

  • Use a plain text editor like Notepad, TextEdit, or VS Code — not Word or Google Docs — to write HTML code.
  • Save your file with a .html extension (for example, index.html) so your browser recognizes it as a web page.
  • Double-click the saved file to open it in your default browser and see how the code renders.
  • If you change the HTML code, save the file again and refresh your browser to see the updates.
  • Keep your HTML files in a dedicated folder so related images, stylesheets, and other files stay organized together.

Step-by-step: Creating your first HTML file on Windows

Open Notepad by pressing the Windows key, typing "notepad", and pressing Enter. You will see a blank document. Type a straightforward HTML structure to start:

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

Go to File, then click Save As. In the filename field, type index.html (or any name you choose, as long as it ends in .html). Make sure the "Save as type" dropdown shows "All Files" or "Text Documents", not "Word Document". Choose a folder where you want to keep your web files — your Desktop or a new folder called "My Websites" works well. Click Save.

Open File Explorer, find your saved index.html file, and double-click it. Your browser will open and display the page with the heading "Hello World" and the paragraph text below it.

Step-by-step: Creating your first HTML file on Mac

Open TextEdit by pressing Command + Space, typing "textedit", and pressing Enter. Go to Format menu and select "Make Plain Text" — this is essential, because TextEdit defaults to rich text formatting that will break your HTML.

Type the same HTML structure:

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

Go to File, then Save. In the filename field, type index.html. TextEdit will ask if you want to use the .txt extension instead — click "Use .html" to confirm. Choose a folder for your file and click Save. Open Finder, locate your index.html file, and double-click it to open it in your browser.

Why plain text editors matter, and when to upgrade

Notepad and TextEdit work because they save only the characters you type, with no hidden formatting. Word, Google Docs, and Pages add invisible code behind the scenes that tells them how to display fonts, colors, and spacing — code that confuses your browser.

As you write more HTML, you may want to switch to a code editor like Visual Studio Code (free, from Microsoft), Sublime Text, or Atom. These editors highlight your HTML tags in different colors so mistakes are easier to spot, and they auto-complete closing tags. They are not required — Notepad works forever — but they make the work faster and catch errors sooner.

Organizing files so images and stylesheets load correctly

When your HTML file references an image or a CSS stylesheet, the browser looks for those files relative to where the HTML file sits. If you save index.html on your Desktop and the image file in your Documents folder, the browser will not find it.

Create a single folder called my-website (or any name). Inside it, save your index.html file. Create subfolders called images and css. Put image files in the images folder and stylesheet files in the css folder. In your HTML, reference them by their path: <img src="images/photo.jpg"> or <link rel="stylesheet" href="css/style.css">. This structure keeps everything together and makes your links work reliably.

Testing your file in different browsers

The same HTML file may look slightly different in Chrome, Firefox, Safari, and Edge because each browser interprets CSS and spacing in its own way. After you create your file, open it in at least two browsers to see how it renders.

Right-click your HTML file and select "Open with", then choose a different browser. You can also drag the file directly into a browser window. If something looks wrong in one browser but correct in another, the issue is usually in your CSS, not your HTML structure.

Editing and updating your file

After you save index.html and open it in your browser, you can edit the file again. Right-click the file in your folder and select "Open with" and choose your text editor. Make your changes, save the file (Ctrl+S on Windows, Command+S on Mac), then go back to your browser and press F5 or Command+R to refresh. The page will show your updates.

Keep both windows open side by side — your text editor on one side and your browser on the other. This way you can edit, save, and refresh without switching windows.

Frequently Asked Questions

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

Yes, but it is awkward. Apps like iSH Editor (iOS) or Jota+ (Android) let you write and save plain text files with a .html extension. The easier path is to use a computer, where you have a full keyboard and can see your browser and editor at the same time.

What if I save the file but it opens in Word instead of my browser?

Right-click the file, select "Open with" (or "Open with" then "Choose another app"), and pick your browser. You can also change the default by right-clicking, selecting Properties or Get Info, and setting the default program to your browser. After that, double-clicking the file will always open it in the browser.

Do I need to upload my HTML file to the internet for it to work?

No. A file on your computer works perfectly in your browser without uploading anywhere. You only upload to the internet if you want other people to see it. Until then, you can edit and test locally.

What is the difference between index.html and other filenames?

index.html has no technical difference — it is just a convention. Web servers treat index.html as the default file to show when someone visits a folder. If you name your file mypage.html, it works the same way on your computer, but when you upload to a server later, visitors would need to type the full filename in the address bar.

Can I have multiple HTML files in the same folder?

Yes. You can create index.html, about.html, contact.html, and more in the same folder. Link between them using <a href="about.html">About</a>. The browser will find them because they are in the same location.