Create a starter HTML template in VS Code

C

Save time with VS Code’s shortcut for starter HTML templates.

Here’s a VS Code shortcut that truly saves time and sets your website HTML up for success. With just a few clicks, VS Code will auto-generate these eleven lines of code for you.

<!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>

HTML5 Starter Template: VSCode

Here are the easy steps for an HTML 5 starter template including meta tags in the head, language declaration, and body.

First, make a new file. Instead of choosing any details at this step, just click return. You’ll see an Untitled-1 file in your tabs.

Next, click “Select a language” (the blue text link). Type “HTML” as your language and click Return.

In the past, the next step that worked for me was to start typing “HTML:5” in my blank document and then click TAB on my keyboard. As a result, the file will automatically populate with the following HTML starter code.

Recently, instead of typing “HTML:5”, I simply type, ! (exclamation point), and then Return and the same starter code is automatically populated. Hopefully, one of these two methods will work with your VS Code setup.

Use VS Code to populate your starter template for HTML by declaring your language and typing HTML then click the Tab button.
Use VS Code to populate your starter template for HTML by declaring your language and typing HTML then click the Tab button.

Did you know VS Code is made by Microsoft? Arguably, VS Code is the best Microsoft application out there for Mac users!

Happy Coding!

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and share tech solutions from my day-to-day as a graphic designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

Add comment

Recent Posts

Archives

Categories