Set up HTML in VS Code

Install an editor, not HTML

Visual Studio Code is an optional code editor. Download it from the official VS Code site for your operating system and follow its installer. HTML itself does not need installation. If you prefer another plain-text editor, the first-page steps work there too.

VS Code already includes HTML syntax highlighting, suggestions and formatting support. You do not need an extension to create a basic HTML page, and an extension does not replace a browser.

Work in a project folder

Create a folder such as my-first-page, then use File → Open Folder in VS Code. In the Explorer panel, create index.html inside that folder. Paste the example below and save. Working in a folder makes it easier to see whether styles.css, script.js and image paths are next to the page when you add them later.

VS Code should recognise the .html extension and offer HTML suggestions as you type. If it says Plain Text in the language selector, confirm the actual filename ends in .html. Formatting can improve indentation, but inspect the result: a formatter does not prove that your structure or content is correct.

• Create your first page

View and update the page

Use your file manager to open the saved index.html in a modern browser, or drag the file into a browser tab. VS Code edits the source; the browser renders it. For a normal local file, save in VS Code and refresh the browser after each change. Compare the tab title with the visible h1 to see the different roles of head and body.

A basic page opened with a file: URL needs no server. Some later web features, such as requests for local resources or JavaScript modules, can be restricted for local files; use a local development server when the project requires one. Do not assume an editor preview and a browser have identical behaviour.

• Inspect and debug in the browser

Syntax

my-first-page/
  index.html

Examples

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first webpage</title>
</head>
<body>
  <main>
    <h1>Welcome to my webpage</h1>
    <p>I'm learning how to give a page structure with HTML.</p>
    <p>Visit <a href="https://example.com/">Example Domain</a>.</p>
  </main>
</body>
</html>

Best practices

• Download VS Code from its official site.
• Open the folder rather than scattering related files.
• Test the saved page in a browser.

Browser compatibility

Related HTML documentation

Specifications & further reading

• VS Code: HTML in Visual Studio Code
• VS Code downloads
• MDN: Installing basic software