Here are some handy shortcuts in Visual Studio Code that may save some time when creating a new HTML file.

These include code that you will probably need when creating a new HTML file. So using these shortcuts can help create the overall structure of almost any HTML file. This way you can quickly set up the new file and focus on the rest of the code.

These shortcuts are based on “Emmet Abbreviation” - a built-in feature in VS Code.

For this to work, make sure the file you’re working on is HTML / PHP / any other file type that supports the HTML markup.

HTML page structure

Typing ! and then pressing the Enter key will add the following code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body></body>
</html>

Connecting a JS file

Typing script:src + pressing Enter will generate this code:

<script src=""></script>

Connecting a CSS file

Typing link:css + pressing Enter will generate the following:

<link rel="stylesheet" href="style.css" />

Quick adjustment

Parts of the code that you might want to modify (like style in href="style.css") are automatically highlighted when inserted, so you can change them instantly.

Pressing the Tab key will change the position of the cursor to the next part of the code that you may want to adjust (such as Document within <title>Document</title>).

This way, you can quickly adjust these code snippets to your own code.