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

Trang chủ » Html Design View In Visual Studio Code » 4 Ways To Run A HTML File In Visual Studio Code - WikiHow

Có thể bạn quan tâm

Skip to ContentQuizzes
  • Home
  • Random
  • Browse Articles
  • 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 How to Run a HTML File in Visual Studio Code PDF download 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

PDF download 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 513,070 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

PDF download Download Article
  1. Step 1 Open Visual Studio Code. 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. Step 2 Open or create a new HTML file. 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. Step 3 Save the file as an HTML file. 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.
    4. Advertisement
Method 2 Method 2 of 4:

Using the Terminal

PDF download Download Article
  1. Step 1 Open Visual Studio Code. 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. Step 2 Open or create a new HTML file. 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. Step 3 Open a new Terminal. 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. Step 4 Type cd followed by the path of the HTML file and press ↵ Enter. 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. Step 5 Type start followed by the HTML file name and press ↵ Enter. 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.
    6. Advertisement
Method 3 Method 3 of 4:

Using the "HTML Preview" Extension

PDF download Download Article
  1. Step 1 Open Visual Studio Code. 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. Step 2 Click the Extensions button. 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. Step 3 Type HTML Preview in the search bar. 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. Step 4 Click the "HTML Preview" extension. 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. Step 5 Click Install. 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. Step 6 Open or create a new HTML file. 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. Step 7 Click the split-screen preview button. 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.
    8. Advertisement
Method 4 Method 4 of 4:

Using the "Open in Browser" Extension

PDF download Download Article
  1. Step 1 Open Visual Studio Code. 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. Step 2 Click the Extensions button. 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. Step 3 Type open in browser in the search bar. 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. Step 4 Click the "open in browser" extension. 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. Step 5 Click Install. 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. Step 6 Open or create a new HTML file. 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. Step 7 Right-click anywhere in the HTML.code. 7 Right-click anywhere in the HTML.code. This displays a context menu.
  8. Step 8 Click Open in Default Browser. 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.
    9. 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

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

Run a HTML FileHow to Open and Run an HTML File: Step-by-Step Guide Open HTM FilesHow toOpen HTM Files Edit HTML FilesHow toEdit HTML Files Download VS CodeHow to Download Visual Studio Code Save a Text Document as an HTML FileHow to Save a Document as an HTML File in a Plain Text Editor Code HTML on Chrome OSHow toCode HTML on Chrome OS View XML FilesHow toView XML Files Write HTML CodeHow toWrite HTML Code Set a Title in HTMLA Step-by-Step Gide to Setting a Title in HTML Add a Hyperlink with HTMLCode a Hyperlink with HTML: A Beginner's How-To Guide Create a Simple CSS Stylesheet Using NotepadHow toCreate a Simple CSS Stylesheet Using Notepad Create a Simple Webpage Using NotepadHow to Create a Simple Webpage Using Notepad: Quick HTML Guide Learn HTMLHow toLearn HTML Print in Javascript4 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

Stan Kats 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 513,070 times. How helpful is this? Co-authors: 11 Updated: August 21, 2025 Views: 513,070 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 513,070 times.

Is this article up to date?

Yes No Did this article help you? Say thanks with a small tip. icon $1 $3 $5 Leave a Tip Support our mission to help everyone in the world learn how to do anything. Advertisement Cookies make wikiHow better. By continuing to use our site, you agree to our cookie policy. Stan Kats Co-authored by: Stan Kats Professional Technologist Click a star to vote Co-authors: 11 Updated: August 21, 2025 Views: 513,070

Quizzes & Games

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

You Might Also Like

Run a HTML FileHow to Open and Run an HTML File: Step-by-Step GuideOpen HTM FilesHow toOpen HTM FilesEdit HTML FilesHow toEdit HTML FilesDownload VS CodeHow to Download Visual Studio Code

Featured Articles

What Does It Mean If Someone Tries to Kill You in Your Dream?What Does It Mean If Someone Tries to Kill You in Your Dream?200+ Best Questions to Ask Someone You Like (Texting & IRL)200+ Best Questions to Ask Someone You Like (Texting & IRL)How Beautiful Am I QuizHow Beautiful Am I Quiz13 Types of Hairlines for Men and Women (And How to Maintain Yours)13 Types of Hairlines for Men and Women (And How to Maintain Yours)Which of the 8 Face Shapes Do You Have? Helpful Tips & Style GuidanceWhich of the 8 Face Shapes Do You Have? Helpful Tips & Style GuidanceMental Illness TestMental Illness Test

Trending Articles

Let Us Rate You 1-10: Attractiveness Scale QuizLet Us Rate You 1-10: Attractiveness Scale QuizAm I a Gigachad or Totally Chopped?Am I a Gigachad or Totally Chopped?How Rare Is My Birthday QuizHow Rare Is My Birthday QuizHow Nonchalant Am I QuizHow Nonchalant Am I QuizCan We Guess If You're Single or Taken?Can We Guess If You're Single or Taken?Make OutHow toMake Out

Featured Articles

Enjoy the HolidaysHow toEnjoy the Holidays Get 250 Grams of Protein Daily: Best Foods, Meal Plans & MoreHow to Get 250 Grams of Protein Daily: Best Foods, Meal Plans & MoreAm I Girly QuizAm I Girly Quiz200 Fun, Flirty, & Deep Questions to Get to Know a Guy Better200 Fun, Flirty, & Deep Questions to Get to Know a Guy Better Tighten Skin Under Your Chin: Natural or Surgical OptionsHow to Tighten Skin Under Your Chin: Natural or Surgical OptionsWhat Would My Nickname Be QuizWhat Would My Nickname Be Quiz

Featured Articles

21 Common Hand Signs & Gestures (& What They Mean)21 Common Hand Signs & Gestures (& What They Mean)170+ Best Useless Facts That Sound Like Lies170+ Best Useless Facts That Sound Like LiesIs He Interested In Me QuizIs He Interested In Me Quiz15 Signs Your Ex Misses You (and What to Do About It)15 Signs Your Ex Misses You (and What to Do About It) Observe Hanukkah (From Candle Lighting to Latke Frying)How to Observe Hanukkah (From Candle Lighting to Latke Frying)165+ "You Are Special" Quotes For Friends, Family, Partners & More165+ "You Are Special" Quotes For Friends, Family, Partners & More

Watch Articles

Wrap a Round GiftHow toWrap a Round GiftSteam in an OvenHow toSteam in an Oven Make Plant-Based Meat: 4 Incredible RecipesHow to Make Plant-Based Meat: 4 Incredible RecipesClean a Silver NecklaceHow toClean a Silver Necklace4 Easy Ways to Open a Can of Soda4 Easy Ways to Open a Can of SodaPart Your HairHow toPart Your Hair

Trending Articles

Have I Met My Soulmate Yet QuizHave I Met My Soulmate Yet Quiz180 Good Comebacks & Savage Roasts to Win Any Argument180 Good Comebacks & Savage Roasts to Win Any ArgumentAm I a Furry QuizAm I a Furry QuizWhat Are the Gay Male Body Types (And Which Do You Have?)What Are the Gay Male Body Types (And Which Do You Have?)What Should My Name Really Be QuizWhat Should My Name Really Be QuizRandom Fortune GeneratorRandom Fortune Generator

Quizzes & Games

Bible Trivia QuizBible Trivia QuizTake QuizWhat Makeup Should I Wear QuizWhat Makeup Should I Wear QuizTake QuizIQ TestIQ TestTake QuizTarot Reading SimulatorTarot Reading SimulatorPlayWhat Kind of Minecraft Player Am I QuizWhat Kind of Minecraft Player Am I QuizTake QuizCognitive TestCognitive TestTake Quiz wikiHow
  • 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

×

wikiHow Tech Help Pro:

Level up your tech skills and stay ahead of the curve

Let's go! X --756

Từ khóa » Html Design View In Visual Studio Code