askvity

What is the Shortcut for HTML Snippet in VS Code?

Published in VS Code HTML Snippet 2 mins read

In VS Code, the most common and widely used shortcut process for generating a basic HTML5 skeleton or snippet is by using Emmet abbreviations.

Generating the HTML Skeleton with Emmet

VS Code has built-in support for Emmet, which is a toolkit that allows you to type abbreviations that expand into complex code snippets. For HTML, this is particularly useful for quickly setting up the initial document structure.

As highlighted in sources discussing VS Code features, a "process" exists within VS Code to easily generate the HTML skeleton. This process primarily leverages Emmet.

Here are the primary methods using Emmet:

  • Type ! followed by Tab or Enter: This is the quickest way to generate an HTML5 doctype and basic structure (<html>, <head>, <body>).
  • Type html:5 followed by Tab or Enter: This achieves the same result as the ! shortcut, explicitly indicating the desired HTML5 standard.
  • Type html:strict followed by Tab or Enter: Generates an HTML 4.01 Strict template.
  • Type html:transitional followed by Tab or Enter: Generates an HTML 4.01 Transitional template.
  • Type html:frame followed by Tab or Enter: Generates an HTML 4.01 Frameset template.

For modern web development, the ! or html:5 shortcut is the standard approach.

Practical Example

  1. Open a new file in VS Code.
  2. Save the file with an .html extension (e.g., index.html) to enable HTML Emmet support.
  3. Type !
  4. Press the Tab key.

VS Code will expand ! into the following basic HTML5 structure:

<!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 quick ! + Tab sequence is the core "shortcut" or "process" often referred to for getting the foundational HTML structure in VS Code, facilitating rapid development startup.

Related Articles