4 Ways To Run A HTML File In Visual Studio Code - WikiHow

Skip to ContentQuizzes

• PRO Courses Hot Guides Tech Help Pro Expert Videos About wikiHow Pro Upgrade
• QUIZZES All Quizzes Hot Love Quizzes Personality Quizzes Trivia Quizzes Taylor Swift Quizzes
• EDIT Edit this Article
• EXPLORE Tech Help ProAbout UsRandom ArticleQuizzes Request a New ArticleCommunity DashboardTrendingForums Arts and EntertainmentArtworkBooksMoviesComputers and ElectronicsComputersPhone SkillsTechnology HacksHealthMen's HealthMental HealthWomen's HealthRelationshipsDatingLoveRelationship Issues Hobbies and CraftsCraftsDrawingGamesEducation & CommunicationCommunication SkillsPersonal DevelopmentStudyingPersonal Care and StyleFashionHair CarePersonal Hygiene Quizzes Love Quizzes Personality Quizzes Fun Games Arts and EntertainmentFinance and BusinessHome and GardenRelationship Quizzes Cars & Other VehiclesFood and EntertainingPersonal Care and StyleSports and Fitness Computers and ElectronicsHealthPets and AnimalsTravel Education & CommunicationHobbies and CraftsPhilosophy and ReligionWork World Family LifeHolidays and TraditionsRelationshipsYouth
• LOG IN

  Log in

  Social login does not work in incognito and private browsers. Please log in with your username or email to continue. Facebook Google wikiHow Account No account yet? Create an account
• RANDOM

• Home
• Random
• Browse Articles
• TrendingNew
• Quizzes & Games
• All QuizzesHot
• Love Quizzes
• Personality Quizzes
• Fun Games
• Dating Simulator
• Learn Something New
• Forums
• Courses
• Happiness Hub
• Explore More
• Support wikiHow
• About wikiHow

• Log in / Sign up

Terms of Use wikiHow is where trusted research and expert knowledge come together. Learn why people trust wikiHow

• Categories
• Computers and Electronics
• Internet
• Website and Blog Creation
• Markup Languages
• HTML

How to Run a HTML File in Visual Studio Code Download Article Explore this Article methods 1 Creating, Opening, and Saving an HTML File 2 Using the Terminal 3 Using the "HTML Preview" Extension 4 Using the "Open in Browser" Extension + Show 1 more... - Show less... Other Sections Video Related Articles Expert Interview References Article Summary Co-authored by Stan Kats and Travis Boylls

Last Updated: August 21, 2025 Fact Checked

Download Article X

This article was co-authored by Stan Kats and by wikiHow staff writer, Travis Boylls. Stan Kats is a Professional Technologist and the COO and Chief Technologist for The STG IT Consulting Group in West Hollywood, California. Stan provides comprehensive technology solutions to businesses through managed IT services, and for individuals through his consumer service business, Stan's Tech Garage. Stan holds a BA in International Relations from The University of Southern California. He began his career working in the Fortune 500 IT world. Stan founded his companies to offer an enterprise-level of expertise for small businesses and individuals. This article has been fact-checked, ensuring the accuracy of any cited facts and confirming the authority of its sources. This article has been viewed 516,013 times.

Visual Studio Code is a source code editor made by Microsoft. It is available for Windows, macOS, and Linux. It allows you to write and edit code in a variety of coding languages, including HTML.[1] But what do you do when you want to run your HTML code to see how it looks. Luckily there are a number of extensions for Visual Studio Code that allow you to easily run HTML code from within Visual Studio Code. You can also use the Terminal to run an HTML file. This wikiHow article teaches you how to run an HTML file in Visual Studio Code.

Steps

Method 1 Method 1 of 4:

Creating, Opening, and Saving an HTML File

Download Article

1. 1 Open Visual Studio Code. Visual Studio Code has an icon that resembles a blue ribbon. Click the Visual Studio Code icon to launch Visual Studio Code.[2] You can find it in the Windows Start menu on Windows, the Applications folder on Mac, or the Apps menu on Linux.
   • If you have not already done so, you can download Visual Studio Code for free from https://code.visualstudio.com/. Simply click the Download button on the web page and open the installation file from within your web browser or Downloads folder. Follow the instructions to complete the installation.
2. 2 Open or create a new HTML file. Use one of the following steps to open or create a new file:[3]
   • To create a new file, click File in the menu bar at the top. Then click New File. Begin typing your HTML code. [4]
   • To open an existing file, click File in the menu bar at the top. Then click Open File. Navigate to the HTML file you want to open and click it to select it. Then click Open.
   Advertisement
3. 3 Save the file as an HTML file. When you are ready to run an HTML file in Visual Studio Code, you'll first need to save the file as an HTML file.[5] Once you save your HTML file, you can run it in any browser of your choice. Use the following steps to save your HTML file in Visual Studio Code:
   • Click File in the menu bar at the top.
   • Click Save as.
   • Enter a file name next to "File Name."
   • Use the drop-down menu next to "Save as type" to select "HTML".
   • Click Save.
Advertisement

Method 2 Method 2 of 4:

Using the Terminal

Download Article

1. 1 Open Visual Studio Code. Visual Studio Code has an icon that resembles a blue ribbon. Click the Visual Studio Code icon to launch Visual Studio Code.[6] You can find it in the Windows Start menu on Windows, the Applications folder on Mac, or the Apps menu on Linux.
2. 2 Open or create a new HTML file. If you haven't already done so, open an existing HTML file, or create a new HTML file and save it in the HTML format. If you already have an HTML file open, click the tab that contains your HTML file at the top of the screen to view it.[7]
3. 3 Open a new Terminal. To do so, click Terminal at the top of the screen. Then click New Terminal. The Terminal is the only way to run an HTML file in Visual Studio Code without using an extension. It is also the most complex way.[8]
   • Alternatively, you can click View at the top, and then click Terminal.
4. 4 Type cd followed by the path of the HTML file and press ↵ Enter. This navigates to the location of your HTML file. For example, if your HTML file is in an HTML file in your Documents folder, you would type cd \Users\username\Documents and press Enter.
   • If your HTML file is saved to a different drive letter than your operating system, you will need to change to that drive letter in the terminal before you can navigate to the path of the HTML file. To do so, simply type the drive letter (i.e D: for a D: drive) and press Enter.
   • If you are not sure where the HTML file is saved, you can right-click the tab for your HTML file at the top of the screen and click Copy Path. Type cd in the Terminal and then paste the path immediately after. Delete the file name at the end of the path and then press Enter.
   • If any of the folders in the path to your HTML file have a space in the name, the Terminal will not be able to navigate to that folder. Use File Explorer on Windows or Finder on Mac to navigate to any folders that have a space in their name and rename those folders to remove any spaces (i.e, if you have a folder called "HTML Files," change it to "HTML_Files" instead.)
5. 5 Type start followed by the HTML file name and press ↵ Enter. For example, if you wanted to run your index HTML file, you would type start index.html and press Enter. This launches the HTML file in a separate window allowing you to preview your HTML file.
   • To close the preview, simply click the "x" icon at the top of the window.
Advertisement

Method 3 Method 3 of 4:

Using the "HTML Preview" Extension

Download Article

1. 1 Open Visual Studio Code. Visual Studio Code has an icon that resembles a blue ribbon. Click the Visual Studio Code icon to launch Visual Studio Code. You can find it in the Windows Start menu on Windows, the Applications folder on Mac, or the Apps menu on Linux.
2. 2 Click the Extensions button. It's the icon that resembles 4 squares in the menu bar on the left. This displays the Extensions search menu.
3. 3 Type HTML Preview in the search bar. The search bar is at the top of the Extensions menu on the left. This displays a list of extensions that match your search query. "HTML Preview" is an extension for Visual Studio Code that allows you to preview HTML files from within Visual Studio Code using a split-screen or in full-window mode.
4. 4 Click the "HTML Preview" extension. It should be the first extension at the top of the list of extensions. It is created by Thomas Haakon Townsend. It contains an icon that resembles an orange shield with a "5" in the middle (the HTML 5 logo).
5. 5 Click Install. It's below the "HTML Preview" header in the information page that is to the right of the extensions menu. This installs the extension. Allow a couple of minutes for it to finish installing.
6. 6 Open or create a new HTML file. If you haven't already done so, open an existing HTML file, or create a new HTML file and save it in the HTML format. If you already have an HTML file open, click the tab that contains your HTML file at the top of the screen to view it.
7. 7 Click the split-screen preview button. It's the icon that resembles a split-screen with a magnifying glass on the left side. It's in the upper-right corner fo the screen. This opens a preview of the HTML file in a split-screen inside Visual Studio Code.
   • Hold Alt and click the preview button to see a full-screen preview of the HTML code.
   • To close the preview, simply click the "x" icon in the preview tab at the top of the screen.
Advertisement

Method 4 Method 4 of 4:

Using the "Open in Browser" Extension

Download Article

1. 1 Open Visual Studio Code. Visual Studio Code has an icon that resembles a blue ribbon. Click the Visual Studio Code icon to launch Visual Studio Code. You can find it in the Windows Start menu on Windows, the Applications folder on Mac, or the Apps menu on Linux.
2. 2 Click the Extensions button. It's the icon that resembles 4 squares in the menu bar on the left. This displays the Extensions search menu.
3. 3 Type open in browser in the search bar. The search bar is at the top of the Extensions menu on the left. This displays a list of extensions that match your search query. "Open in browser" is an extension for Visual Studio Code that allows you to open an HTML file using a web browser of your choice from within Visual Studio Code.
4. 4 Click the "open in browser" extension. It should be the first extension at the top of the list. It's the one that has all lowercase letters and is created by TechER. Click the extension to select it.
5. 5 Click Install. It's below the "open in browser" header in the information page that is to the right of the extensions menu. This installs the extension. Allow a couple of minutes for it to finish installing.
6. 6 Open or create a new HTML file. If you haven't already done so, open an existing HTML file, or create a new HTML file and save it in the HTML format. If you already have an HTML file open, click the tab that contains your HTML file at the top of the screen to view it.
7. 7 Right-click anywhere in the HTML.code. This displays a context menu.
8. 8 Click Open in Default Browser. This opens the HTML file in your default web browser. This allows you to view the HTML file.[9]
   • Alternatively, you can click Open in Other Browser and double-click the web browser of your choice.
   • If you are asked to select a default browser, click the browser you want to open the file in and click Ok.
Advertisement

Expert Q&A

Search Add New Question Ask a Question 200 characters left Include your email address to get a message when this question is answered. Submit Advertisement Did this article help you? Say thanks with a small tip. $1 $3 $5 Leave a Tip Support our mission to help everyone in the world learn how to do anything.

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 Open and Run an HTML File: Step-by-Step Guide How toOpen HTM Files How toEdit HTML Files How to Download Visual Studio Code How to Save a Document as an HTML File in a Plain Text Editor How toCode HTML on Chrome OS How toView XML Files How toWrite HTML Code A Step-by-Step Gide to Setting a Title in HTML Code a Hyperlink with HTML: A Beginner's How-To Guide How toCreate a Simple CSS Stylesheet Using Notepad How to Create a Simple Webpage Using Notepad: Quick HTML Guide How toLearn HTML 4 Ways to Print in JavaScript: Console, Window Alert, & More Advertisement

Expert Interview

Thanks for reading our article! If you'd like to learn more about Computer Networking, check out our in-depth interview with Stan Kats.

References

1. ↑ Stan Kats. Professional Technologist. Expert Interview
2. ↑ https://www.youtube.com/watch?v=dAI21EfRv6Y
3. ↑ https://www.youtube.com/watch?v=dAI21EfRv6Y
4. ↑ https://www.youtube.com/watch?v=dAI21EfRv6Y
5. ↑ https://www.youtube.com/watch?v=dAI21EfRv6Y
6. ↑ https://www.altcademy.com/blog/how-to-run-html-code-in-visual-studio-code/
7. ↑ https://www.altcademy.com/blog/how-to-run-html-code-in-visual-studio-code/
8. ↑ https://code.visualstudio.com/docs/terminal/basics
9. ↑ https://medium.com/geekculture/how-to-run-html-in-visual-studio-code-ba4c6818c919

About This Article

Co-authored by: Stan Kats Professional Technologist This article was co-authored by Stan Kats and by wikiHow staff writer, Travis Boylls. Stan Kats is a Professional Technologist and the COO and Chief Technologist for The STG IT Consulting Group in West Hollywood, California. Stan provides comprehensive technology solutions to businesses through managed IT services, and for individuals through his consumer service business, Stan's Tech Garage. Stan holds a BA in International Relations from The University of Southern California. He began his career working in the Fortune 500 IT world. Stan founded his companies to offer an enterprise-level of expertise for small businesses and individuals. This article has been viewed 516,013 times. How helpful is this? Co-authors: 11 Updated: August 21, 2025 Views: 516,013 Categories: HTML Article SummaryX

1. Open or create an HTML file in Visual Studio Code. 2. Click the Extensions button on the left side. 3. Search for "HTML Preview" and install it. 4. Click the tab for your HTML file at the top. 5. Click the icon that resembles a split-screen with a magnifying glass at the top. Did this summary help you?YesNo

In other languages Hindi Vietnamese Indonesian Spanish Dutch French Portuguese Thai Chinese Czech Italian Japanese

• Print
• Send fan mail to authors

Thanks to all authors for creating a page that has been read 516,013 times.

Is this article up to date?

Yes No Advertisement Cookies make wikiHow better. By continuing to use our site, you agree to our cookie policy. Co-authored by: Stan Kats Professional Technologist Click a star to vote Co-authors: 11 Updated: August 21, 2025 Views: 516,013

Quizzes & Games

Music Notes & Symbols TestTake QuizWhat Tarot Card Am I QuizTake QuizWhat Wild wikiHow Article Am I QuizTake QuizCreative Ability TestTake QuizThe Impossible QuizTake QuizEmoji TestTake Quiz

You Might Also Like

How to Open and Run an HTML File: Step-by-Step GuideHow toOpen HTM FilesHow toEdit HTML FilesHow to Download Visual Studio Code

Trending Articles

Will I Ever Find Love QuizAm I Autistic QuizHow Sexual Am I QuizDiscover the Secret Meaning of Your First NameHow toPractice Kissing5 Different Types of Butts: Find Your Shape

Watch Articles

Amazing Super Bowl Party Ideas Guests Will Cheer ForHow toDevelop Listening SkillsHow toNot Lose Your GirlfriendHow to Draw an OwlHow toTreat AllergiesHow toIntroduce Friends to Other Friends

Trending Articles

What Would My Nickname Be QuizCan We Guess How Tall You Are QuizCan We Guess If You're Single or Taken?Depression Test for TeensHow toBe PrettyHow to Sleep Next to a Snoring Husband: Our 8 Best Tips & Tricks

Quizzes & Games

Bible Trivia QuizTake QuizWhat Makeup Should I Wear QuizTake QuizIQ TestTake QuizTarot Reading AnalyzerPlayWhat Kind of Minecraft Player Am I QuizTake QuizCognitive TestTake Quiz

• Categories
• Computers and Electronics
• Internet
• Website and Blog Creation
• Markup Languages
• HTML

wikiHow Newsletter You're all set! Helpful how-tos delivered toyour inbox every week! Sign me up! By signing up you are agreeing to receive emails according to our privacy policy.

• Home
• About wikiHow
• Experts
• Jobs
• Contact Us
• Site Map
• Terms of Use
• Privacy Policy
• Do Not Sell or Share My Info
• Not Selling Info
• Contribute

Follow Us

×

Keep up with tech in just 5 minutes a week!

Subscribe You're all set! X --649