How to Open and Run an HTML File: Step-by-Step Guide

PDF download Download Article
Plus, how to save your HTML file for easy viewing
PDF download Download Article

HTML (Hypertext Markup Language) is a web-based coding language known as a "markup language." It's mainly used to create the structure of websites. In this article, we'll teach you how to save your HTML file and open it in your browser (as all modern browsers are capable of opening and interpreting .html files), as well as how to run your HTML code in an online code viewer or through FTP (or File Transfer Protocol).

Running an HTML File

  • Right-click your HTML file, select Open with, and select a web browser. Your browser will run the file and interpret your code.
  • Upload your file to an online HTML viewer to see the code and changes you make in real time.
  • Use an FTP client to upload an HTML file to your website, then visit the website in your browser.
Section 1 of 4:

Saving an HTML File

PDF download Download Article
  1. HTML files are text files that represent the content and the layout of a web page. To read an HTML file, you can use any text editor (e.g., Notepad, Notepad++ , or any specialized HTML editor). However, if you want to see what the web page looks like, you need to run it on a web browser, which is designed to read and render HTML files.
    • If you just want to run an HTML file you downloaded from somewhere else, skip down to Running in a Browser .
  2. As you become a more proficient coder, you can use HTML editing programs like Adobe Dreamweaver, CoffeeCup, and Visual Studio Code, but a simple program is all you need to start. Notepad (Windows) or TextEdit (Mac) should suffice.
    Advertisement
  3. If you make an HTML file in Notepad, TextEdit, or any other text editor, be sure to save it with the proper notation. Before saving the file, make sure that you have changed your "Save as type" to All files (if needed) and click Save .
    4. Advertisement
Section 2 of 4:

Running in a Browser

PDF download Download Article
  1. Right-click (Windows) or control-click (Mac) the file and select Open with from the menu. Then, choose your preferred web browser, such as Microsoft Edge, Chrome, Safari, or Firefox. The browser automatically interprets your code and displays it. The file location will appear in the address bar. [1]
    • Most computers will associate your default browser with the .html file extension. That means that usually, you don't need to find a browser to open the file—you can just double-click on it, and the computer will open it in your default web browser.
    • If your PC doesn't recognize the file, Windows will ask whether to open this file using an already installed application or search for the extension on the internet. Select the "open using already installed applications" option. You will be able to choose from a list of all browsers installed on the computer.
    • If you see a .css or .js file with the HTML file, you can leave it alone for now. CSS files dictate the styling of the webpage, and JavaScript files control the interactive aspects of the page (though you can use HTML and CSS to code interactive website elements as well).
Section 3 of 4:

Running in an Online Viewer

PDF download Download Article
  1. 1
    Navigate to an online HTML viewer. There are a number of websites that allow you to view your HTML files. Try one of these options:
    • HTML Online Viewer allows you to upload an HTML file, or you can copy and paste your raw HTML into the website's text editor. The pane on the right side of the page updates in real time to show you your HTML and any changes you make.
    • Code Beautify also allows you to upload an HTML file or copy and paste your code into the webpage, and it also shows you your code interpreted in real time. However, unlike HTML Online Viewer, this website will "beautify" (or format) your HTML code so it's easy to read.
    • Phoenix Code is an online IDE (or integrated development environment) that allows you to code your HTML online and view it in real-time. This IDE is quite powerful, as it allows you to create CSS and JS files to go with your HTML.
    • Codepen is another online development environment that allows you to code in HTML, CSS, and JavaScript. You can easily save your code (called "pens") and share it with other people.
  2. 2
    Upload your HTML file. If the site you chose has a button to import files, click that and navigate to your HTML file. Otherwise, simply copy and paste your HTML into the site's text editor.
  3. 3
    View your interpreted code. If the site you're using doesn't update automatically, click the button to view it (which might say View or Run ). You can then go back and edit your code as needed if you want to tweak something.
    4. Advertisement
Section 4 of 4:

Running via FTP

PDF download Download Article
  1. If your host has one built in, stick with that—it will make it a lot simpler. If not, use a third-party FTP client like FileZilla .
  2. If you're using the built-in platform, you don't need to worry about this. You'll usually see two boxes on the left and two boxes on the right. Don't worry about the left or top right ones; all you need to focus on is the bottom right box.
  3. It will start the upload right away. If you're using the built-in platform, find and locate the "htdocs," "public_html," or other default HTML folder (check with your web host if you're unsure), and click Upload . [2]
    • Don't use the shortcut! This will upload the LNK Mirror file, which you don't want.
  4. Wait until the file is uploaded. Then, if you've removed the default page, go and view your website to see your HTML file! If you see a directory listing, click the .html file to view.
    5. Advertisement

Community Q&A

Search
Add New Question
  • Question
    How do I run the HTML code from the notepad?
    Community Answer
    Save the file as an HTML file type. Then, open the file and it should open in a browser.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 43 Helpful 70
  • Question
    How do I open the file in Notepad again after opening it in the browser?
    Community Answer
    Do the opposite of what you did to make it an html file. Save it as index.txt from index.html.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 12 Helpful 24
  • Question
    How do I run an HTML program using Chrome?
    Community Answer
    First, save the program on your desktop with an extension ".html," then right click on the file document and click on open with Chrome.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 26 Helpful 46
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      You Might Also Like

      How to
      Run a .Jar Java File
      How to
      Write PHP Scripts
      How to
      Write HTML Code
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Create a Basic HTML Website: A Step-by-Step Guide
      How to
      Insert Spaces in HTML & CSS: 5 Easy Ways with Examples
      How to
      Insert Images with HTML
      How to
      Open HTM Files
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Copy HTML Source Code on Your Computer, iPhone, or Android
      How to
      Change the Button Color in HTML
      How to
      Resize iFrames in HTML
      How to
      Make a Birthday Card with HTML and CSS
      Advertisement

      References

      1. ↑ https://www.lenovo.com/us/en/glossary/open-with/
      2. ↑ https://wiki.filezilla-project.org/Using

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 698,045 times.

      Is this article up to date?

      Advertisement