VS Code Tips: Emmet for Faster HTML/CSS

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

Emmet is a tool that helps you write HTML very fast. It’s built into VS Code and activates automatically when the editor recognizes an Emmet expression.

Creating an HTML Boilerplate

Type ! and press Tab to get a complete HTML5 boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>

Child and Sibling Elements

> creates a child element
+ creates a sibling element

nav>ul>li

Produces:

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

div+p+span

Produces:

<div></div>
<p></p>
<span></span>

Level Up

Use ^ to go back up a level:

ul>li>div+p^li>span

Produces:

<ul>
    <li>
        <div></div>
        <p></p>
    </li>
    <li><span></span></li>
</ul>

Multipliers

Use * to repeat elements:

ul>li*5>p

Creates 5 list items, each containing a paragraph.

Grouping

Use parentheses () to group elements:

ul>li>(p+span)*2

Produces:

<ul>
    <li>
        <p></p>
        <span></span>
        <p></p>
        <span></span>
    </li>
</ul>

Classes and IDs

Use CSS-like syntax for classes and IDs:

ul>li>p.text#first

Produces:

<ul>
    <li>
        <p class="text" id="first"></p>
    </li>
</ul>

Multiple classes:

p.text.paragraph

Produces:

<p class="text paragraph"></p>

Incremental Classes

Use $ for auto-incrementing numbers:

ul>li.item$*3

Produces:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

Start from a specific number with @:

ul>li.item$@10*2

Produces items with classes item10 and item11.

Other Attributes

Use [] for custom attributes:

p[style="color: red" title="A color"]

Produces:

<p style="color: red" title="A color"></p>

Adding Content

Use {} for text content:

ul>li.item$*2>p{Item $}

Produces:

<ul>
    <li class="item1"><p>Item 1</p></li>
    <li class="item2"><p>Item 2</p></li>
</ul>

Common Abbreviations

Head Tags

Abbreviation	Output
`link`	`<link rel="stylesheet" href="" />`
`link:css`	`<link rel="stylesheet" href="style.css" />`
`link:favicon`	`<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />`
`meta:utf`	`<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />`
`meta:vp`	Viewport meta tag
`script:src`	`<script src=""></script>`

Common Tags

Abbreviation	Output
`img`	`<img src="" alt="" />`
`a`	`<a href=""></a>`
`ul+`	`<ul><li></li></ul>`
`ol+`	`<ol><li></li></ol>`
`table+`	`<table><tr><td></td></tr></table>`

Semantic Tags

Abbreviation	Output
`mn`	`<main></main>`
`sect`	`<section></section>`
`art`	`<article></article>`
`hdr`	`<header></header>`
`ftr`	`<footer></footer>`

Form Elements

Abbreviation	Output
`form:post`	`<form action="" method="post"></form>`
`input:email`	`<input type="email" name="" id="" />`
`input:password`	`<input type="password" name="" id="" />`
`btn`	`<button></button>`
`select+`	`<select><option></option></select>`
`textarea`	`<textarea name="" id="" cols="30" rows="10"></textarea>`

Lessons in this unit:

0:	Introduction
1:	Setup and Configuration Tips
2:	Terminal Tips
3:	Editing Tips
4:	Prettier and Auto-Formatting
5:	Language-Specific Settings
6:	▶︎ Emmet for Faster HTML/CSS
7:	Debugging in VS Code
8:	Fix node modules import errors in VS Code
9:	Fixing TS issues in VS Code - Astro
10:	regex select entire line starting with..