Emmet for HTML: A Beginner's Guide to Writing Faster Markup
A while back, I was watching someone code and noticed they'd type something short like ul>li*5>a and suddenly a full navigation menu would appear. I thought they were using some kind of template or snippet library. Turns out, it was Emmet — and it's been built into VS Code the whole time.
Learning Emmet felt like discovering a cheat code. Writing HTML went from tedious to almost fun.
The Problem With Writing HTML By Hand
Let's be honest. HTML is repetitive. You're constantly typing opening tags, closing tags, attributes, and nested structures. A simple navigation menu looks like this:
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
That's 8 lines of code for three links. Your fingers get tired. You make typos. You forget closing tags. It's slow.
Emmet exists because someone got tired of this too.
What Emmet Actually Is
Emmet is a shortcut language that expands abbreviations into full HTML. You type a short pattern, press Tab, and it explodes into complete markup.
It's built into VS Code by default. No extensions needed. Just start typing in any HTML file.
Basic Elements
The simplest use: type a tag name and press Tab.
p → <p></p>
div → <div></div>
h1 → <h1></h1>
Already faster than typing both tags manually.
Adding Classes and IDs
This is where Emmet starts saving real time. Use . for classes and # for IDs:
div.container → <div class="container"></div>
header#main → <header id="main"></header>
Chain multiple classes:
div.card.shadow.rounded → <div class="card shadow rounded"></div>
Combine classes and IDs:
section#hero.banner.full-width
Expands to:
<section id="hero" class="banner full-width"></section>
I use this constantly. Most of my divs have classes, and typing .classname is way faster than class="classname".
Adding Attributes
Use square brackets for attributes:
a[href="https://google.com"]
Becomes:
<a href="https://google.com"></a>
For images:
img[src="photo.jpg" alt="Profile picture"]
Becomes:
<img src="photo.jpg" alt="Profile picture" />
You can add any attribute this way. Works for data- attributes, aria- labels, whatever you need.
Nesting Elements
Use > to put elements inside each other:
nav>ul>li>a
Becomes:
<nav>
<ul>
<li><a href=""></a></li>
</ul>
</nav>
This is the game-changer. Nested structures that would take multiple lines to type come out in one abbreviation.
Sibling Elements
Use + for elements at the same level:
header+main+footer
Becomes:
<header></header>
<main></main>
<footer></footer>
Combine with nesting:
header>nav+div.logo
Gives you a header containing both a nav and a logo div, side by side.
Multiplication
Use * to repeat elements:
li*5
Becomes:
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
Now combine everything:
ul.menu>li.item*4>a.link
Becomes:
<ul class="menu">
<li class="item"><a href="" class="link"></a></li>
<li class="item"><a href="" class="link"></a></li>
<li class="item"><a href="" class="link"></a></li>
<li class="item"><a href="" class="link"></a></li>
</ul>
That's a full navigation structure from one line.
Adding Text Content
Use curly braces for text:
p{Hello World}
Becomes:
<p>Hello World</p>
a[href="#"]{Click Here}
Becomes:
<a href="#">Click Here</a>
Auto-Numbering
Use $ for sequential numbers:
ul>li.item$*3
Becomes:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
Great for generating test data or numbered sections.
The Magic Boilerplate
This one still impresses people. Type a single exclamation mark:
!
Press Tab. You get:
<!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>
Complete HTML5 boilerplate from one character.
Quick Reference
| Abbreviation | What It Creates |
|---|---|
div.box | <div class="box"></div> |
p#intro | <p id="intro"></p> |
ul>li*3 | Unordered list with 3 items |
h1+p+p | Heading followed by two paragraphs |
a{Click} | <a>Click</a> |
! | Full HTML boilerplate |
Start Using It Today
Open VS Code. Create an HTML file. Try this:
div.card>h2{Title}+p{Description}+a.btn{Read More}
Press Tab. Watch it expand.
Emmet isn't required to write HTML. But once you start using it, typing everything manually feels painfully slow. It's one of those tools that takes an hour to learn and saves hundreds of hours over time.