How To Open An HTML File In Chrome

You have a file called something like index.html sitting on your desktop. Maybe an AI wrote it, maybe a designer sent it, maybe you saved it out of another tool.

You double-click it, and one of two things happens.

Either a web page appears, which is what you wanted, or a wall of code opens in Notepad, which is not.

Both are covered below, along with the separate question of reading the code on purpose.

This is how to open an HTML file in Chrome on Windows and on a Mac, how to fix the file type when it points at the wrong program, and what quietly breaks on a page read off your own hard drive.

If you only need to see the page right now, paste the code into a free HTML viewer and it renders in the browser. It has an Open File button too, so it can read the file straight off your machine.

Four Ways To Open An HTML File In Chrome

Any of these works and all of them take a few seconds.

1. Double-click the file. This only works if Chrome already owns the .html file type on your machine. If it does not, see the next section.
2. Drag it onto an open Chrome window. Drop it on the page area and Chrome loads it in the current tab. This ignores your default program completely, which makes it the most reliable of the four.
3. Press Ctrl+O in Chrome. Cmd+O on a Mac. You get a normal file picker, and Chrome opens whatever you choose.
4. Right-click the file, then Open With. Pick Google Chrome from the list. This opens one file without changing anything permanently.

Whichever you use, look at the address bar afterwards. On Windows you will see something like file:///C:/Users/you/Desktop/page.html. On a Mac, file:///Users/you/Desktop/page.html.

That is not a web address. It is the file's location on this one computer, written the way a browser writes locations. Hold on to that, because it explains most of the rest of this post.

Why Did It Open In Notepad Instead?

Because the .html extension is registered to a text editor on your computer rather than to a browser.

That usually happens because you installed VS Code, Notepad++ or Sublime and let it claim file associations during setup.

Nothing is wrong with the file. Only the setting that decides which program opens it needs changing.

On Windows

Right-click the file, choose Open with, then Choose another app. Pick Google Chrome. Tick Always use this app to open .html files before you confirm, and every .html file on the machine opens in Chrome from then on.

You can do the same in bulk through Settings, then Apps, then Default apps, then search for .html.

One trap here wastes a surprising amount of people's time. Windows hides extensions for known file types by default, so a file actually named page.html.txt is displayed as page.html and will keep opening in Notepad no matter what you set, because it genuinely is a text file. In File Explorer, turn on File name extensions in the View menu and check what the file is really called.

On A Mac

Right-click the file and choose Open With, then Google Chrome. That handles the one file and changes nothing else.

To set it for every .html file: click the file once, press Cmd+I to get info, expand Open with, choose Google Chrome, then click Change All and confirm.

One caveat most guides skip. If you are editing this file every day, do not change the default at all. Leave the editor owning .html and drag the file onto Chrome instead.

How To View The HTML Code Instead Of The Page

Press Ctrl+U on Windows or Cmd+Option+U on a Mac and Chrome shows you the raw code in a new tab. Right-clicking the page and choosing View page source does the same thing.

Notice what happens to the address: Chrome puts view-source: in front of it. You can type that prefix yourself in front of any address, a local file included.

That is one of two ways to look at code, and they do not show you the same thing. The second is DevTools: F12 or Ctrl+Shift+I on Windows, Cmd+Option+I on a Mac, then the Elements panel. Chrome DevTools documentation

The difference matters more than it sounds like it should.

View source is the file as delivered. Exactly the characters that arrived, before the browser did anything with them. If you are checking what you wrote, or what an AI actually generated, this is the honest view.

DevTools shows the live page. It is the document after the browser parsed it and every script finished running. If JavaScript added a menu or injected a hundred divs, you see the result rather than the instructions. On a script-heavy page the two barely resemble each other.

DevTools edits are not saved either. Type into the Elements panel, watch the page change, refresh, and it is all gone. It is a scratchpad, not an editor.

If the file came out of Claude, ChatGPT or a site builder, read the source before you do anything else, because what those tools hand you varies a lot and the difference decides what your next step is.

What Breaks When You Open A Page Locally

Everything that assumes a server, because there is not one. The browser is reading bytes off your disk, and file:// is a far more restricted world than https://.

Here is what stops working:

• Absolute paths. A source like <img src="/images/logo.png"> means "start at the root". On a website that is the site. On your disk it is the drive, so Chrome looks in C:/images/logo.png, finds nothing, and draws a broken image icon. Relative paths like images/logo.png work fine.
• fetch and anything that loads a data file. A page opened from disk has no real origin, so those requests are refused before they leave. Loading your own data.json from the next folder fails just like a request to somebody else's website would. MDN on cross-origin restrictions
• ES modules. A <script type="module"> tag falls under the same rule and refuses to load from disk. The console shows an error and none of your JavaScript runs, which looks like a broken page rather than a blocked one.
• Anything server-side. A form posts nowhere at all. A .php file opens as plain text or downloads, because there is nothing there to run it.

What still works: Google Fonts, a CDN script, an image hosted elsewhere, anything with a full https:// address in front of it. Those are public web addresses, so the browser fetches them normally.

This answers a question people ask constantly without realising it is the same question.

A page that looks broken on your desktop and perfect once it is hosted was never broken. It was missing a server. The reverse happens too, and it is worth watching for: a page that works locally and breaks after you upload it usually has an absolute path pointing at your own drive.

If you already know your way around a terminal, running a small local web server inside the folder clears all of this up in one command. If you do not, skip it, because there is a better reason to put the file somewhere real.

The Honest Limit: A Local File Has No Address

file:///C:/Users/you/Desktop/page.html is a location on one hard drive.

Send that string to a client and they get nothing, because their machine has no C:/Users/you. Paste it into Slack and it will not even become a link. Open it on your phone and there is nothing there.

No trick fixes this. A local file cannot be shared, cannot be reviewed by anyone else, and cannot be tested on a real phone on real mobile data, which is the only test that tells you whether the page actually works.

The other half of that, said plainly: hosting does not repair a page that is broken for its own reasons. If an image fails on your desktop because the path points at your drive, it fails after you upload it as well. OxyPages does not rewrite your paths for you, and neither does any other host. Fix the paths first, upload second.

What To Do Next

Five minutes, in this order.

1. Open the file in Chrome using whichever of the four methods suits you.
2. If Notepad opened instead, either fix the file association or just drag the file onto Chrome.
3. Press Ctrl+U and check the source is what you expected, especially if an AI wrote it.
4. Press F12 and read the Console tab. Red errors there are the images and scripts that will still be missing after you host it.
5. Fix any path that starts with a slash or with a drive letter.

Then give the file an address. Putting an HTML file online takes about a minute and costs nothing at this size. Netlify Drop is the shortest route if you want a link in ten seconds with no account, and Cloudflare Pages is a good free home for something you intend to keep.

Drag your folder into OxyPages if you would rather upload the whole folder and get a working link with form handling and editing included.