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.

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.

Here's how to open an HTML file in Chrome on Windows, a Mac or a Chromebook, what works on a phone, how to read any website's code, and what breaks on a page read off your own 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.

Four Ways To Open An HTML File In Chrome

Each takes a few seconds. The shortcuts are the ones listed in Google's Chrome keyboard shortcuts page as of November 2026.

1. Double-click the file. This only works if Chrome already owns the .html file type. If it doesn't, see the next section.
2. Drag it onto an open Chrome window. Chrome loads it in the current tab. This ignores your default program, which makes it the most reliable of the four.
3. Press Ctrl+O in Chrome. Cmd+O on a Mac, Ctrl+O on a Chromebook. Pick the file in the normal file picker.
4. Right-click the file, then Open With. Pick Google Chrome. This opens one file without changing anything permanently.

Now look at the address bar. On Windows you'll see something like file:///C:/Users/you/Desktop/page.html. On a Mac, file:///Users/you/Desktop/page.html.

That isn't a web address. It's the file's location on this one computer, and 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 wastes a lot of time. Windows hides known file extensions, so a file named page.html.txt shows as page.html and keeps opening in Notepad, because it really is a text file. In File Explorer, turn on File name extensions in the View menu and check the real name.

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.

If you edit this file every day, don't change the default at all. Leave the editor owning .html and drag the file onto Chrome.

On A Chromebook

Open the Files app (Shift+Alt+M), right-click the file and choose Open with. Pick Chrome for this one file, or choose Change default to make it stick. Chrome normally opens .html files out of the box, so this only matters if you installed a text editor app that took over.

How To View The HTML Code Instead Of The Page

Press Ctrl+U on Windows, Linux or a Chromebook, or Cmd+Option+U on a Mac, and Chrome shows the raw code of the open page in a new tab. It works the same on a live website as on a file on your desktop. Right-clicking the page and choosing View page source does the same thing.

Chrome puts view-source: in front of the address, and you can type that prefix yourself in front of any address.

The second way is DevTools: F12 or Ctrl+Shift+I on Windows (Ctrl+Shift+I on a Chromebook), or Cmd+Option+I on a Mac. Ctrl+Shift+C (Cmd+Option+C) opens the Elements panel with a picker, so you can click any part of the page and see its code. The full list is in Chrome's guide to opening DevTools.

The two views don't show the same thing.

View source is the file as delivered. Exactly the characters that arrived. If you're checking what an AI actually generated, this is the honest view.

DevTools shows the live page, after every script finished running. If JavaScript added a menu or a hundred divs, you see the result rather than the instructions.

DevTools edits aren't saved. Refresh and they're gone. It's 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.

Can You Open An HTML File In Chrome On A Phone?

Partly on Android, and not really on an iPhone or iPad.

On Android, tap the file in your Files app and choose Chrome if offered. A self-contained page usually displays, but the address starts with content://, and linked images, CSS and other pages often fail. Treat it as a quick look, not a test.

Chrome on iPhone has no Open File command and no view source, so a file sitting in your Files app can't be opened in it directly. Use an online viewer, or put the file at a real address.

Neither phone version of Chrome has DevTools built in. To inspect a page running on a phone, you connect it by cable to a computer: Android through chrome://inspect in desktop Chrome, following Chrome's remote debugging guide, and iPhone through Safari's Web Inspector on a Mac, which Chrome for iOS has supported since version 115.

What Breaks When You Open A Page Locally

Everything that assumes a server, because there isn't 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's the site. On your disk it's 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. How an HTML file finds its images and stylesheets explains the rule in full.
• fetch and anything that loads a data file. A page opened from disk has no real origin, so even your own data.json from the next folder is refused.
• ES modules. A <script type="module"> tag falls under the same rule. The console shows an error and none of your JavaScript runs.
• Anything server-side. A form posts nowhere at all. A .php file opens as plain text or downloads, because there's nothing there to run it.

What still works: Google Fonts, a CDN script, an image hosted elsewhere, anything with a full https:// address.

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

If you know your way around a terminal, a small local web server inside the folder clears all of this up in one command. If you don't, skip it, because there's 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. No trick fixes this. A local file can't be shared, reviewed by anyone else, or tested on a real phone on mobile data.

The other half, said plainly: hosting doesn't repair a page that's broken for its own reasons. If an image path points at your drive, it fails after you upload it too. Fix the paths first, upload second.

And if the page needs PHP, a database or WordPress, a static host is the wrong tool and you'll need a server-side host instead.

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 (Cmd+Option+U on a Mac) and check the source is what you expected, especially if an AI wrote it.
4. Press Ctrl+Shift+J (Cmd+Option+J on a Mac) to open 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 a quick route to a temporary link with no account, and Cloudflare Pages is a good free home for something you intend to keep.

Drag your folder into OxyPages for a working link in seconds without an account, then start a free account, no card needed, if you want to keep it online and edit it later.