Using Visual Studio Code to Write HTML

by

Visual Studio Code, commonly called VS Code, is a popular code editor for writing HTML and other web technologies. It provides useful features such as syntax highlighting, autocomplete, code formatting, extensions, file management, and an integrated terminal.

You can use VS Code to create HTML files, edit your code, and preview your webpages in a web browser.

For example, an HTML file created in VS Code can contain:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First Website</title>
</head>

<body>

    <h1>Hello World!</h1>
    <p>Welcome to my website.</p>

</body>

</html>

The code follows the standard HTML document structure used to organize the <html>, <head>, and <body> sections of a webpage.

What Is Visual Studio Code?

Visual Studio Code is a free source-code editor developed by Microsoft.

It can be used for many technologies, including:

  • HTML
  • CSS
  • JavaScript
  • Java
  • Python
  • C++
  • C#
  • PHP
  • TypeScript
  • React

For HTML development, VS Code provides features that make writing and managing webpages easier than using a basic text editor.

Why Use VS Code for HTML?

You can write HTML using a simple text editor such as Notepad, but VS Code provides additional development features.

Some useful features include:

  • Syntax highlighting
  • HTML autocomplete
  • Emmet support
  • Automatic indentation
  • Code folding
  • Error detection
  • Extensions
  • Integrated terminal
  • File explorer
  • Search and replace
  • Multiple files and folders
  • Customizable interface

These features become especially useful as your HTML projects become larger.

Installing Visual Studio Code

Download and install Visual Studio Code from the official Visual Studio Code website.

During installation, follow the setup instructions provided by the installer.

After installation, open VS Code.

You should see the main editor interface with areas such as:

  • Activity Bar
  • Side Bar
  • Editor
  • Panel
  • Status Bar

The exact interface can vary between versions and operating systems.

Creating an HTML Project Folder

Before creating an HTML file, it is useful to create a dedicated project folder.

For example:

my-website/

You can create this folder anywhere on your computer.

A simple project might eventually look like:

my-website/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
└── images/

Keeping related files together makes your project easier to manage.

Opening a Folder in VS Code

Open VS Code and select:

File → Open Folder

Choose your project folder.

For example:

my-website

The folder will appear in the Explorer panel.

You can then create and manage your HTML files directly from VS Code.

Creating Your First HTML File

In the Explorer panel, create a new file named:

index.html

The .html extension tells VS Code and your operating system that the file is an HTML document.

Enter the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First Website</title>
</head>

<body>

    <h1>Welcome to Web4Learners</h1>

    <p>I am learning HTML using Visual Studio Code.</p>

</body>

</html>

Save the file using:

Ctrl + S

Understanding the HTML Code

The code you write in VS Code uses standard HTML elements.

For example:

<h1>Welcome to Web4Learners</h1>

creates a heading.

<p>I am learning HTML.</p>

creates a paragraph.

HTML elements are the building blocks used to structure webpage content. Understanding HTML Elements makes it easier to understand what you are writing inside VS Code.

Using Emmet in VS Code

One of the most useful features for HTML development in VS Code is Emmet.

Emmet allows you to write short abbreviations that expand into HTML code.

For example, type:

!

and press:

Enter

or:

Tab

VS Code can generate a basic HTML document structure.

It can produce something similar to:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

This can save time when creating new HTML documents.

HTML Autocomplete

VS Code provides autocomplete suggestions while writing HTML.

For example, start typing:

<h

VS Code may suggest HTML heading elements such as:

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Similarly, typing:

<p

can provide suggestions for the paragraph element and its available attributes.

This makes writing HTML faster and reduces typing mistakes.

Auto Closing Tags

VS Code can automatically help with closing HTML tags.

For example, when you type:

<p>

the editor can automatically provide:

<p></p>

You can then enter your content:

<p>Welcome to Web4Learners.</p>

Correct opening and closing tags are important because HTML elements often depend on properly paired tags. This is closely related to Opening and Closing Tags.

Automatic Indentation

VS Code can automatically indent HTML code.

For example:

<div>
    <section>
        <h2>HTML Tutorial</h2>
        <p>Learn HTML step by step.</p>
    </section>
</div>

The indentation makes nested elements easier to understand.

This becomes especially useful when working with complex HTML structures containing multiple parent and child elements.

HTML Syntax Highlighting

VS Code uses different visual formatting for different parts of your code.

For example:

<a href="https://example.com" class="link">
    Visit Website
</a>

The editor visually distinguishes:

  • Element names
  • Attributes
  • Attribute values
  • Text
  • HTML syntax

This makes your code easier to read.

Writing HTML Attributes

VS Code can also help when writing HTML attributes.

For example:

<img src="logo.png" alt="Web4Learners Logo">

Here:

  • src identifies the image source.
  • alt provides alternative text.

Attributes provide additional information about HTML elements. The syntax and purpose of attributes are explained in HTML Attributes.

Opening HTML in a Browser

After writing your HTML, save the file:

Ctrl + S

Then open the HTML file in your browser.

For example:

my-website/
└── index.html

You can right-click the file from your computer and choose a browser.

Some VS Code extensions can also provide convenient browser preview functionality.

Using Live Server

One popular extension for web development is Live Server.

It can start a local development server and automatically refresh the webpage when you save changes.

After installing a suitable Live Server extension, you can typically open your HTML file and use the Go Live option.

Your browser may then open a local address similar to:

http://127.0.0.1:5500/

The exact port can vary.

Note: Live Server is useful for development, but it is not required to learn or write basic HTML.

Editing and Testing HTML

A typical workflow in VS Code looks like this:

Write HTML
    ↓
Save File
    ↓
Open/Refresh Browser
    ↓
Check Result
    ↓
Modify HTML
    ↓
Save Again
    ↓
Refresh Browser

For example, change:

<h1>Hello World!</h1>

to:

<h1>Welcome to Web4Learners!</h1>

Save the file and refresh the browser.

The updated heading will appear.

Creating Multiple HTML Pages

VS Code makes it easy to create multiple HTML files inside the same project.

For example:

my-website/
│
├── index.html
├── about.html
├── tutorials.html
└── contact.html

You can connect these pages using links:

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="tutorials.html">Tutorials</a>
    <a href="contact.html">Contact</a>
</nav>

This allows you to build a complete multi-page website.

Using Comments in VS Code

You can add HTML comments to organize your code.

For example:

<!-- Website Header -->

<header>
    <h1>Web4Learners</h1>
</header>

You can also use comments to temporarily disable a section of HTML:

<!--
<section>
    <h2>Temporary Section</h2>
</section>
-->

Comments are ignored by the browser when rendering the webpage.

Formatting HTML Code

VS Code can help you keep your HTML properly formatted.

For example, poorly formatted HTML may look like:

<div><section><h2>HTML</h2><p>Learn HTML.</p></section></div>

A formatted version is easier to read:

<div>
    <section>
        <h2>HTML</h2>
        <p>Learn HTML.</p>
    </section>
</div>

Readable formatting becomes increasingly important as your HTML project grows.

Using Extensions

VS Code supports extensions that can add functionality to the editor.

Extensions can provide features for:

  • HTML
  • CSS
  • JavaScript
  • Live preview
  • Formatting
  • Git
  • Frameworks
  • Accessibility
  • Productivity

You can search for extensions using the Extensions section in VS Code.

Important: Install extensions from reputable publishers and only install extensions you actually need.

Using the Integrated Terminal

VS Code includes an integrated terminal that allows you to run commands without opening a separate terminal application.

For example, you can open the terminal from:

Terminal → New Terminal

The terminal can be used for tasks such as:

npm install
npm run dev
git status

These commands become particularly useful when you later work with CSS frameworks, JavaScript projects, React, or other development tools.

Basic HTML itself does not require the terminal.

Using VS Code for HTML and CSS

You can create an HTML file and CSS file inside the same project.

Project structure:

my-website/
│
├── index.html
└── css/
    └── style.css

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>Web4Learners</h1>

    <p>Learn web development.</p>

</body>

</html>

CSS:

h1 {
    color: blue;
}

p {
    font-size: 18px;
}

VS Code allows you to work with both files in the same project.

Common Mistakes

Saving the File With the Wrong Extension

Make sure the file is:

index.html

and not:

index.html.txt

Opening the Wrong Folder

When working on a project, open the main project folder in VS Code rather than opening individual files separately whenever possible.

This makes it easier to manage related HTML, CSS, JavaScript, and image files.

Forgetting to Save

If you modify your HTML but do not save it, your browser may continue displaying the previous version.

Use:

Ctrl + S

regularly.

Forgetting to Refresh the Browser

After saving changes, refresh the webpage if you are not using automatic live reloading.

Writing Incorrect HTML

VS Code can help identify some problems, but you still need to understand HTML.

For example, make sure your tags are properly nested:

<section>
    <h2>HTML Tutorial</h2>
    <p>Learn HTML.</p>
</section>

rather than incorrectly crossing the opening and closing tags.

Best Practices

  • Create a separate folder for each website project.
  • Use meaningful filenames such as index.html, about.html, and contact.html.
  • Keep HTML, CSS, JavaScript, and images organized.
  • Save your files regularly.
  • Use lowercase HTML element and attribute names.
  • Use proper indentation.
  • Take advantage of Emmet to write common HTML structures quickly.
  • Use autocomplete to reduce typing errors.
  • Install only useful and trusted extensions.
  • Test your HTML regularly in a browser.
  • Keep your code readable and properly structured.

FAQs

What is Visual Studio Code?

Visual Studio Code is a source-code editor developed by Microsoft. It can be used to write and manage HTML, CSS, JavaScript, and many other programming and markup languages.

Is Visual Studio Code free?

Yes. Visual Studio Code is available as a free code editor.

Can I use VS Code to write HTML?

Yes. VS Code is commonly used to create, edit, and manage HTML files.

Do I need VS Code to learn HTML?

No. You can learn HTML using Notepad or another text editor. VS Code simply provides additional features that make HTML development easier.

What file extension should I use for HTML in VS Code?

Use the .html extension.

For example:

index.html

What is Emmet in VS Code?

Emmet is a feature that allows you to write short abbreviations and expand them into HTML and CSS code.

For example, typing:

!

and pressing Tab can generate a basic HTML document structure.

How do I open an HTML file in a browser from VS Code?

You can save the HTML file and open it from your computer using a browser. You can also use an appropriate browser-preview or Live Server extension for a more convenient development workflow.

What is Live Server in VS Code?

Live Server is a development tool commonly used with VS Code that can serve local webpages and automatically reload the browser when files are saved.

Can I use VS Code for CSS and JavaScript?

Yes. VS Code supports HTML, CSS, JavaScript, and many other technologies.

Can I create a complete website using VS Code?

Yes. You can create HTML pages, CSS files, JavaScript files, images, and other project resources inside a VS Code project.

Does VS Code require the internet to write HTML?

No. Once VS Code is installed, you can write and edit basic HTML files without an internet connection. Internet access may be needed for downloading extensions, software updates, or external resources.