Generate a basic HTML page in VS Code with Emmet

Save a new file as index.html, set its language mode to HTML, type !, and run Emmet: Expand Abbreviation from the Command Palette. Emmet is built into VS Code; this document scaffold does not require an AI tool or a third-party extension. VS Code Emmet documentation

If typing ! does nothing, check the language mode before installing anything. An unsaved file in Plain Text mode is a different editing context from an HTML file.

Create the file before expanding the abbreviation

Make a small folder for the page and save an empty file inside it as index.html. Check the language indicator near the bottom of the editor. If it says Plain Text, select it and choose HTML.

Type ! on an empty line. Choose the Emmet expansion from suggestions, or open the Command Palette with Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS and run Emmet: Expand Abbreviation.

The generated structure supplies the document elements. Replace its title and add your content inside body. For a small equipment notice, the finished file can be:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Equipment return notice</title>
</head>
<body>
  <h1>Return loaned equipment</h1>
  <p>Bring borrowed tripods to the media desk by Friday.</p>
</body>
</html>

This is an illustrative completed page. It is not the exact unedited expansion in every configuration: Emmet settings and snippets can change generated markup. The notice gives you visible content to check after saving.

Make suggestions or Tab expansion behave as expected

If the suggestion menu does not appear, invoke suggestions manually with Ctrl+Space, or use the Command Palette expansion directly. Tab expansion has its own setting:

"emmet.triggerExpansionOnTab": true

Add that property within your existing VS Code settings JSON, respecting its commas and braces. You can also keep your current Tab behavior and use the command instead. If Emmet remains unavailable, check whether the built-in Emmet extension has been disabled. Expansion settings and troubleshooting

Place the cursor after the abbreviation when invoking expansion. A file containing the literal ! after the command has not yet become the document you intend to preview.

Check the saved file in a browser

Save the file, then open that exact index.html in your installed browser. For the sample above, the tab title should be “Equipment return notice,” and the page should show “Return loaned equipment” above the Friday instruction.

Change Friday to Thursday in VS Code, save, and reload the same browser file. If Friday remains, compare the browser's file path with the folder you edited. A second index.html in Downloads can look identical until you change one copy.

For more about opening existing source without changing its format, see opening HTML in a text editor. Keep this page local until its title, text, and saved-file path match what you intended.

Keep reading