Emmet for HTML: Write HTML at Lightning Speed
Introduction
Writing raw HTML can feel painfully slow. You type <div>, close it, add classes, nest elements, and repeat the same patterns again and again. It works, but it’s repetitive and time-consuming.
What if you could write one short line, and instantly get five properly nested list items?
ul>li*5
That’s exactly what Emmet does. It turns tiny shortcuts into full HTML structures, saving you tons of typing and effort.
What Emmet Is
Emmet is a shortcut language for HTML. You write a short abbreviation, press a key (usually Tab), and your code editor expands it into complete HTML. Think of it like autocomplete but with superpowers:
You type less
You get more code
And it’s perfectly formatted
How Emmet Works Inside Code Editors
Most modern code editors like VS Code have Emmet built in. The flow is simple:
Type an Emmet abbreviation.
Press
Tab(orEnter, depending on settings).The editor replaces the abbreviation with full HTML.
You never leave your keyboard, and you don’t manually write opening/closing tags again and again.
Creating Elements
Single Element
Here is the simplest example:
- Emmet Abbreviation:
div
- Expanded HTML:
<div></div>
You just write the tag name. Emmet writes the full element.
Multiple Elements
Another example of creating multiple elements quickly is below:
- Emmet Abbreviation:
h1+p
- Expanded HTML:
<h1></h1>
<p></p>
The + means “next sibling element”.
Adding Classes, IDs, and Attributes
- You can add Classes, IDs, and attributes by using a CSS selector-like syntax.
Classes
- Emmet Abbreviation:
div.container
- Expanded HTML:
<div class="container"></div>
IDs
- Emmet Abbreviation:
section#hero
- Expanded HTML:
<section id="hero"></section>
Attributes
- Emmet Abbreviation:
input[type="text"]
- Expanded HTML:
<input type="text">
Combined Example
- Emmet Abbreviation:
button.btn.primary[type="submit"]
- Expanded HTML:
<button class="btn primary" type="submit"></button>
Creating Nested Elements
You can use > to put one element inside another.
- Emmet Abbreviation:
ul>li
- Expanded HTML:
<ul>
<li></li>
</ul>
Deeper Nesting
- Emmet Abbreviation:
div>ul>li
- Expanded HTML:
<div>
<ul>
<li></li>
</ul>
</div>
Each > means “go one level deeper”.
Repeating Elements Using Multiplication
You can use * to repeat elements.
- Emmet Abbreviation:
ul>li*3
- Expanded HTML:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Generating Full HTML Boilerplate
You can create a complete HTML boilerplate with one word.
- Emmet Abbreviation:
!
- Expanded HTML:
<!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>
Conclusion
Emmet turns slow, repetitive HTML writing into a fast, almost conversational process. By learning a few simple symbols like >, +, ., #, * and !, you can generate complex structures in seconds.
Start small, use it daily, and soon typing full HTML by hand will feel outdated.
