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 to create one. Any text editor — Notepad on Windows, TextEdit on Mac, or gedit on Linux — will work. You type HTML code into the editor, save the file with a .html or .htm extension, and your browser can open it. The browser reads the code and turns it into the formatted page you see on screen.

The simplest HTML file contains just a few lines: opening and closing tags that tell the browser "this is an HTML document," a head section for the page title, and a body section for the content people see. You can build from there, adding paragraphs, headings, links, and images as you learn.

Key Takeaways

  • Open any plain text editor (Notepad, TextEdit, gedit, or VS Code) and type your HTML code into a blank document.
  • Save the file with a .html or .htm extension — the extension tells your computer this is a web page, not a regular text file.
  • Open the saved file in any web browser by double-clicking it or dragging it into a browser window to see how it looks.
  • Use basic tags like <h1> for headings, <p> for paragraphs, and <a href=""> for links to structure your content.

Creating your first HTML file on Windows

Open Notepad by pressing the Windows key, typing "notepad," and pressing Enter. A blank window appears. Type or paste your HTML code into it. A minimal working example looks like this:

<!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>

Once you have typed this, go to File and click Save As. Choose a folder where you want to keep the file — your Desktop or Documents folder works fine. In the "File name" field, type a name followed by .html, like mypage.html. Make sure "Save as type" is set to "All Files" so Notepad does not add .txt to the end. Click Save.

Now open File Explorer, navigate to the folder where you saved the file, and double-click mypage.html. Your default browser opens and displays the page. You now have a working HTML file.

Creating your first HTML file on Mac

Open TextEdit by pressing Command + Space, typing "textedit," and pressing Enter. A blank document appears. Before you type anything, go to Format menu and click "Make Plain Text" — this is important, because TextEdit normally saves in a formatted style that breaks HTML code.

Type or paste your HTML code into the document. Once you are done, go to File and click Save. Choose a folder for the file and type a name with the .html extension, like mypage.html. TextEdit will ask whether you want to use the .html extension; click "Use .html".

Open Finder, navigate to the folder where you saved the file, and double-click mypage.html. Your default browser opens and displays the page.

Using a code editor instead of a basic text editor

As you write more HTML, a dedicated code editor becomes useful. Programs like Visual Studio Code (free, from Microsoft), Sublime Text, and Atom highlight your code in different colors so mistakes stand out, show you matching opening and closing tags, and let you preview your page without leaving the editor.

Visual Studio Code is the most common choice for beginners. read it from code.visualstudio.com, install it, and open it. Click File, then New File. Type your HTML code. Go to File and Save, choose a folder, type a filename with .html at the end, and save. You can then right-click the file in the editor and select "Open with Live Server" to see your page update in real time as you type.

A code editor is not required — Notepad and TextEdit work fine — but they make the work faster and catch errors earlier.

Understanding the basic structure every HTML file needs

Every HTML file should start with <!DOCTYPE html>, which tells the browser this is an HTML5 document (the current standard). Next comes the <html> tag, which wraps everything else. Inside that are two main sections: the <head> and the <body>.

The head section contains information about the page that does not appear on screen: the page title (which shows in the browser tab), links to stylesheets, and metadata. The body section contains everything the reader sees: headings, paragraphs, images, and links. Every opening tag like <body> needs a closing tag like </body>. The closing tag has a forward slash.

This structure is not optional — browsers expect it. If you leave it out, the page may still display, but the browser has to guess what you meant, and the result can look wrong or behave unexpectedly.

Adding content with common HTML tags

Once you have the basic structure in place, you add content using tags. <h1> through <h6> create headings, with h1 being the largest and most important. <p> creates a paragraph. <strong> makes text bold, and <em> makes it italic. <a href="url"> creates a link — you replace "url" with the actual web address.

To add an image, use <img src="filename.jpg" alt="description">. The src tells the browser where to find the image file, and alt provides text that displays if the image does not load. To create a list, use <ul> for an unordered (bulleted) list or <ol> for an ordered (numbered) list, with <li> for each item inside.

You do not need to memorize every tag. Search for "HTML tags reference" when you need something specific, and you will find lists of tags with examples of how to use them.

Saving and opening your HTML file correctly

The file extension matters. A file named mypage.html will open in your browser. A file named mypage.txt will open in a text editor, even if it contains HTML code. Always use .html or .htm at the end of the filename.

Once saved, you can open the file by double-clicking it, dragging it into a browser window, or right-clicking it and selecting "Open with" and choosing your browser. If you make changes to the HTML code, save the file in your editor, then refresh the browser page (usually Ctrl+R on Windows or Command+R on Mac) to see the changes.

Keep your HTML files and any images or other files they reference in the same folder, or in a clear subfolder structure. If your HTML file references an image called photo.jpg but the image is in a different folder, the browser will not find it and the image will not display.

Frequently Asked Questions

What is the difference between .html and .htm?

There is no practical difference. Both extensions tell your computer the file is an HTML document. .html is more common on modern systems, but .htm exists because older Windows systems limited filenames to three-letter extensions. Use .html unless you have a specific reason not to.

Can I create an HTML file on my phone?

Yes, but it is awkward. Apps like Dcoder or Pydroid 3 let you write code on Android, and there are similar apps for iPhone. For learning and serious work, a computer with a text editor or code editor is much easier.

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

No. HTML files are plain text files that live on your computer. You can create them, edit them, and view them in your browser without any internet connection. You only need the internet if your HTML file links to external resources like images hosted on a website.

What happens if I make a mistake in my HTML code?

The browser will usually try to display the page anyway, even if the code is wrong. You might see text in the wrong place, missing formatting, or broken links. Open the file in your text editor, find the mistake, fix it, save the file, and refresh the browser to see the corrected version.

Can I use Microsoft Word to create an HTML file?

Word can save documents as HTML, but the code it generates is messy and full of extra formatting that makes it hard to edit later. Stick with a plain text editor or a code editor for cleaner, simpler HTML that you can actually work with.