- What Is an HTML File?
- Method 1: Double-Click to Open the HTML Document
- Method 2: Drag and Drop
- Method 3: Open the Local HTML File Using the File Menu
- Method 4: Right-Click “Open With”
- Method 5: Use the File Protocol
- How to Open an HTML File in Chromebook
- How to Set Google Chrome as Your Default Browser
- How to Open an HTML File in Chrome on Phone
- How to View The Source HTML Code in Chrome
- Troubleshooting: HTML File Not Opening Correctly?
- Next Steps: Hosting Your HTML File Online
- FAQ—How to Open an HTML File in Google Chrome
- Can I use other browsers to open HTML files?
- Is there a keyboard shortcut to open an HTML file in Chrome?
- Do I need an internet connection to open an HTML file in Chrome?
- What’s the easiest way to open HTML files in Chrome Browser?
- Can I edit HTML in Chrome?
- Why is my HTML file not displaying correctly in Chrome?
- How can I ensure security when opening HTML files in Chrome?
You double-click the HTML file…
… and nothing happens!
Or it opens in Notepad as raw code.
Or it opens in a browser that isn’t Chrome.
If Google Chrome isn’t set as your default browser on your desktop, HTML files won’t open in it.
Good News? It’s a quick fix, and only takes a few minutes.
Here’s what we will cover in this guide:
- The four easy methods to open a local html file in Chrome.
- How to set Google chrome as the default browser on Mac and Windows.
- How to open the file in Google Chrome on mobile.
- An easy way to share your file with other people on the internet
- How to troubleshoot file not opening or not displaying properly
What Is an HTML File?
An HTML file tells a browser what to display.
- Text
- Images
- Videos
- Links
All of these elements are defined in HTML.
HTML stands for Hypertext Markup Language.
It’s a markup language that uses tags to tell the browser what should be displayed and how it should be displayed.
For example:
- <h1> tag creates a heading.
- <video> tag embeds a video in the page.
- <img> tag displays an image file.
- <a> tag creates a link.
Every webpage you visit is built on HTML.
An HTML file is a local file that contains tags that structure the content inside. It usually ends in the .html or .htm extension.
When you open the file in a browser, it reads the HTML code and renders it into a webpage.
Method 1: Double-Click to Open the HTML Document
The easiest way to open an HTML file in Google Chrome is to double-click it.
Navigate to the destination folder on your computer where the file is and simply double-click it.
If Google Chrome is your default browser, this will open the HTML page in it on your PC.
Didn’t work? There are a few reasons why that might not have worked:
- Google Chrome isn’t your computer’s default web browser.
- You don’t have Chrome installed on your computer.
- Some other browser (such as Firefox, Safari, or Microsoft Edge) is set as the default.
- You waited too long between the two clicks. You need to click immediately after the first click.
If this didn’t work for you, this next method definitely will…
Method 2: Drag and Drop
If Google Chrome isn’t already open, open it.
Navigate to the destination folder where the HTML file is in Finder (MacOS) or File Explorer (Windows).
Now, click and drag the file onto the browser window.
Drop the file.
Chrome will instantly load and display it on your desktop.
Pro Tip: You can drag and drop the file onto the Chrome icon in your taskbar (Windows) or dock (MacOS). It will automatically open Chrome and load your HTML file.
Method 3: Open the Local HTML File Using the File Menu
First, open Google Chrome.
Then, select the File menu from the top bar and click the Open File option.
Now when the window opens, navigate to the folder with your file and select the file you want to open.
Click the Open button to open it in Chrome.
Pro Tip: You can also just press Cmd + O on MacOS or Ctrl + O on Windows to open the File Picker.
Method 4: Right-Click “Open With”
Find the file in Finder (MacOS) or File Explorer (Windows).
Right-click the HTML file and choose “Open With” option.
Now, choose Chrome from the options.
Method 5: Use the File Protocol
This one is a bit more advanced than the other methods on this list. It uses the file protocol used by browsers (including Chrome) to open the file.
On MacOS
First, you will need to find the location of the file on your computer.
On MacOS, you can copy the file path from the Path Bar in Finder.
To enable the Path Bar, click View in the menu bar and click the Show Path Bar option.
You will now see the path bar at the bottom of the Finder window.
Select the file and then right click the name of the file in the Path Bar.
Click the Copy “file.html” as Pathname option.
Now, open Chrome, and enter ‘file:’ in the address bar and paste the copied pathname after it. Then, press Enter.
The entered URL should look something like this:
file:/Users/mohitgangrade/Documents/documents/bio.html
If you entered the URL correctly, Chrome will open the file.
Pro Tip: You can also press Option + Cmd + P to display the Path Bar.
On Windows
On Windows, finding the path to your HTML webpage is even simpler.
Open the folder containing the HTML file in File Explorer.
Now, right click the file and click the Copy as path option.
Now, open Chrome, and enter ‘file:’, and then paste the copied path.
When you paste the path, Windows might add quotes to the path. Remove the quotes after pasting the path.
It should look something like this:
file:C:\Users\mohit\Documents\bio.html
Press enter to open the file.
How to Open an HTML File in Chromebook
Chromebooks make it incredibly easy to open HTML files in Chrome.
First, open the Files app.
Navigate to the folder where the HTML file is saved.
Now, double-click the file.
That should open Chrome and display the file.
Didn’t work?
Right click the file, select Open With, and click Chrome from the listed options.
How to Set Google Chrome as Your Default Browser
If you want to always open HTML files in Chrome, you will need to make it your default browser.
Once you do this, you will only need to double click the HTML file to open it in Chrome.
It’s easy and takes less than a minute!
On MacOS
To set Google Chrome as the default browser on MacOS, open System Settings.
You can do that two ways:
Click the System Settings icon on the dock.
Type ‘default browser’ in the Search bar on the top left of the window.
Click the Default web browser option in the search results.
Now, select Google Chrome from the Default web browser dropdown menu.
On Windows
First, click the Start button and search for ‘Default Apps.’
Click the first option in the search results.
Now, search for ‘Google Chrome’ in the search bar in the Set defaults for applications section.
Click Google Chrome when it appears as an option.
Finally, click the Set default button to set Chrome as the default web browser.
Set Google Chrome as your Default Browser from Browser Settings
A quick way to set Google Chrome as your default browser is to do it from the Google Chrome settings page.
To open the Settings page, click the three dots menu on the top right of your browser.
Select the Settings option from the menu.
Open the Default Browser tab from the left sidebar of the Settings page.
Now, click the Make Default button.
On Windows, this will automatically set Chrome as your default browser.
But on Mac OS, you will be asked whether you want to switch browsers or not. Click the ‘Use “Chrome”’ button.
That’s it!
Chrome is now your default web browser.
Double clicking any HTML file will now automatically open it in Chrome.
How to Open an HTML File in Chrome on Phone
Before you can open the file in Chrome on your phone, you will need to transfer it first from your computer to your phone.
Here are some ways you can transfer the file to your phone:
- Email it to yourself
- Send it to your phone using bluetooth
- Send it to someone using WhatsApp and download it on your phone
- Upload it to a cloud storage service like Google Drive and save it on your phone
Once you transfer the file to your phone, find where it is stored in the File Manager. The location will depend on how you transferred the file. Note that the steps may vary slightly depending on your device and operating system.
Click the file to see options for apps to open it with.
Click the Chrome browser from the options.
The file should now open in the Chrome app.
How to View The Source HTML Code in Chrome
To view the source code of any web page or HTML file you have open in Chrome, just right click anywhere on the page and click the View Page Source button.
This will open the source code of the HTML document in a new tab. The code includes all the elements that make up your page. You will also see any comments in the code.
If you want to learn how to write or edit an HTML file, read our article on how to edit HTML files.
Troubleshooting: HTML File Not Opening Correctly?
If the above methods didn’t work, don’t worry! These troubleshooting tips will be helpful in identifying the issue and getting your HTML file to display properly in Chrome.
The file opens in the wrong browser
This can happen if another browser is set as the default. On MacOS, this is Safari, and on Windows, this is Microsoft Edge or even Internet Explorer.
Easy fix. Right click the file, take your mouse over the Open with option, and select Google Chrome from the options.
Changes aren’t showing up
Browsers cache HTML documents aggressively.
After updating the code of your document, you should try a hard reload. Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac. This will clear the cache and reload the file.
Images or styles or videos aren’t loading
Broken images and styles are almost always a file path problem.
Double-check the file name and extension in the HTML code. Make sure it matches the name (including capitalization) and extension (.jpg, .png, .jpeg, etc.) of the file.
The file opens as plain text in the browser instead of rendering
This usually happens when the browser doesn’t recognize the file as an HTML file. It could be because the file extension is .txt instead of .html extension or .htm extension.
If you created the file using Notepad, it might have added a .txt extension automatically. If that’s the case, just rename the extension from .txt to .html.
Next Steps: Hosting Your HTML File Online
Do you want to share your HTML file with other people? The easiest way to do it is to host it online with Tiiny Host. This way, other people will be able to access the file without having to download it.
To host your file, visit Tiiny.host in your browser.
Drag and drop your HTML file onto the file upload drop zone.
Now, enter a name for your project in the link-name field. And sign up for a free account.
After signing up, click the Publish button to publish your project.
Click the View link button to see the live page.
FAQ—How to Open an HTML File in Google Chrome
Can I use other browsers to open HTML files?
Yes, you can use any web browser on your computer to open HTML document. HTML is a markup language that tells a browser how to render a particular page. It has been supported by all major browsers since the early days of Netscape, and every modern browser today handles it natively. All web browsers support it.
Is there a keyboard shortcut to open an HTML file in Chrome?
To open an HTML file in Chrome, you can use the Cmd + O (Ctrl + O on Windows) shortcut. It opens the File Picker menu allowing you to select the HTML document you want to open.
Do I need an internet connection to open an HTML file in Chrome?
Nope. You don’t need an internet connection to view local HTML files. However, if the HTML file contains images or scripts or fonts from other websites, you will need an active internet connection for them to work.
What’s the easiest way to open HTML files in Chrome Browser?
The easiest way to open HTML files is to double click the file you want to open. If that doesn’t open the file in Chrome, you can drag and drop the file onto the browser window to open it.
If double clicking doesn’t work for you, you will need to set Google Chrome as your default browser.
Can I edit HTML in Chrome?
Yes! You can edit the HTML code of any web page by right clicking an element and clicking Inspect.
This will open the DevTools and allow you to edit the HTML code of the page.
Keep in mind that these changes are only local and will not be saved. That means, once you refresh the page, these changes will be lost.
Why is my HTML file not displaying correctly in Chrome?
When you open a local HTML file in Chrome, it creates a sandbox environment that sometimes doesn’t allow external resources to load as a security measure. Because of this, the browser will often block resources like fonts, scripts, iframes, and external HTTP calls.
Hosting your file online with a platform like Tiiny Host (see the Next Steps section) bypasses these local security restrictions and serves your files correctly.
Other possible reasons are:
- CSS and Images not loading: Check that the file paths in your HTML file’s code are relative and not absolute. For example, href=”assets/styles.css”, and not href=”/assets/styles.css”.
- JavaScript Not Running: Open DevTools by pressing F12 and check the console to see the errors.
- Browser Cache: Press Cmd + Shift + R on MacOS or Ctrl + Shift + R to do force-reload and clear browser cache.
- File Opens as Plain Text: Check the file extension. If it is .txt, change it to .html extension to ensure it is readable by the browser in the correct HTML format. Also make sure the encoding of the file is set to UTF-8.
If you want to get the full picture, try opening the DevTools by pressing F12 and checking the console. It will show you all the errors that are preventing the file from displaying properly.
How can I ensure security when opening HTML files in Chrome?
HTML files are generally safe to open. The only time they can be harmful is if they contain scripts from unknown sources.
A few good habits:
- Keep Google Chrome updated to the latest version.
- Enable Safe Browsing in Chrome Settings if not already enabled.
- Only open files from sources you trust.
- Use a reputable antivirus program and keep it updated.
If you are about to open an HTML file from a source you don’t trust, you can first disable JavaScript (JS) and disconnect your internet before opening it as an extra security measure.
