Imagine you're writing HTML and you need a navigation bar with five links inside a list. Without any shortcuts, you'd type something like this by hand:
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
That's 9 lines. Typed character by character. Now imagine doing that dozens of times a day.
With Emmet, you can generate that exact same block of HTML by typing this:
nav>ul>li*5>a[href="#"]{Link $}
One line. Then you press Tab, and the entire structure appears. That's the power of Emmet.
How does a single line of shorthand turn into a full block of HTML — and how can you start using it today?
Let's break it down.
1. What Emmet Is
Emmet is a shortcut language built into most modern code editors. You type a short abbreviation, press a key (usually Tab), and Emmet expands it into a full block of HTML.
That's it. It's not a plugin you need to learn from scratch, it's not a framework, and it's not something that changes how HTML works. It's simply a faster way to write HTML.
Analogy: Think of Emmet like autocomplete, but on steroids. Instead of suggesting the next word, it generates an entire structure from a tiny hint you give it.
2. Why Emmet Is Useful for HTML Beginners
You might think, "I'm a beginner — shouldn't I be typing everything out by hand to learn?" That's a fair thought, and honestly, understanding what the HTML looks like is important. But here's the thing: Emmet doesn't hide the HTML from you. It shows you the full expanded output right in your editor.
So Emmet is actually a great learning tool because it:
- Generates correct HTML structure instantly, so you can see how nesting works
- Saves you from repetitive typing, which means less frustration
- Helps you experiment faster — want to try a different layout? Generate it in seconds
- Reinforces patterns — the more you use Emmet, the more you internalize how HTML is structured
Analogy: Learning to cook with a recipe book doesn't make you a worse cook. It lets you focus on understanding the dish instead of struggling to remember every ingredient. Emmet is your recipe book for HTML.
3. How Emmet Works Inside a Code Editor
Emmet comes pre-installed in VS Code (the most popular code editor for web development). In most other editors, you can install it as a plugin.
Here's the workflow, step by step:
┌─────────────────────────────────────────────────────┐
│ Step 1: Open a file with a .html extension │
│ │
│ Step 2: Type your Emmet abbreviation │
│ e.g. ul>li*3 │
│ │
│ Step 3: Press Tab │
│ │
│ Step 4: Emmet expands it into full HTML │
│ <ul> │
│ <li></li> │
│ <li></li> │
│ <li></li> │
│ </ul> │
└─────────────────────────────────────────────────────┘
A few things to keep in mind:
- Make sure your file is saved with a
.htmlextension. Emmet needs to know you're writing HTML. - The abbreviation must be typed on its own — don't put it inside another tag or add extra spaces.
- If Tab doesn't work, try Ctrl + Space first to trigger the suggestion, then press Enter.
4. Basic Emmet Syntax and Abbreviations
Emmet has a simple grammar. Once you learn a handful of symbols, you can build almost anything. Here's what each symbol means:
Symbol Meaning Example
────── ────────────────────────────── ─────────────
> Child (nest inside) div>p
+ Sibling (next to) h1+p
* Multiply (repeat) li*3
. Class name div.container
# ID name div#main
[] Attribute a[href="url"]
{} Text content p{Hello!}
$ Auto-number (increments) li*3{Item $}
Don't worry about memorizing all of these right now. We'll use each one in the examples below, one at a time.
5. Creating HTML Elements Using Emmet
The simplest thing you can do is type the name of an element and press Tab. Emmet will generate the opening and closing tags for you.
Single Elements
You type: Emmet generates:
───────── ────────────────
p <p></p>
h1 <h1></h1>
div <div></div>
section <section></section>
Clean. Simple. No typos on closing tags.
Adding Text Content
Wrap your text in curly braces {} to put content inside the element:
You type: Emmet generates:
───────────────── ────────────────────────
p{Hello, World!} <p>Hello, World!</p>
h1{My Website} <h1>My Website</h1>
6. Adding Classes, IDs, and Attributes
This is where Emmet starts to feel like a superpower. You can attach classes, IDs, and attributes directly into your abbreviation.
Classes (using .)
You type: Emmet generates:
───────────────────────── ─────────────────────────────────
div.container <div class="container"></div>
p.intro <p class="intro"></p>
div.card.shadow <div class="card shadow"></div>
Notice that last one — you can chain multiple classes by adding multiple dots. Emmet stacks them all into one class attribute.
IDs (using #)
You type: Emmet generates:
───────────────────────── ─────────────────────────────────
div#main <div id="main"></div>
section#about <section id="about"></section>
Combining Classes and IDs
You type: Emmet generates:
───────────────────────── ──────────────────────────────────────────
div#header.top.dark <div id="header" class="top dark"></div>
Custom Attributes (using [])
You type: Emmet generates:
───────────────────────────────── ──────────────────────────────────────────
a[href="https://example.com"] <a href="https://example.com"></a>
img[src="photo.jpg"][alt="A photo"] <img src="photo.jpg" alt="A photo">
input[type="email"] <input type="email">
Analogy: Think of . and # as quick-access labels you stick on an element — like color-coded sticky notes. The [] brackets are for anything more specific, like writing a custom note on the sticky.
7. Creating Nested Elements
This is one of the most useful Emmet features. The > symbol creates a parent-child relationship — exactly like nesting tags in HTML.
Simple Nesting
You type: Emmet generates:
───────── ────────────────────────
div>p <div>
<p></p>
</div>
nav>ul>li <nav>
<ul>
<li></li>
</ul>
</nav>
What's Actually Happening
div > p
│ │
│ └── Child: <p> is INSIDE <div>
│
└─── Parent: <div> wraps around <p>
Produces:
┌── <div> ─────────────┐
│ │
│ ┌── <p> ─────────┐ │
│ │ │ │
│ └────────────────┘ │
│ │
└──────────────────────┘
Using Siblings with +
What if you want elements next to each other instead of nested? Use +:
You type: Emmet generates:
───────────── ──────────────────────
h1+p <h1></h1>
<p></p>
h1+p+p <h1></h1>
<p></p>
<p></p>
Combining > and + Together
You type: Emmet generates:
───────────── ──────────────────────
div>h1+p <div>
<h1></h1>
<p></p>
</div>
Here, h1 and p are both children of div, and they sit next to each other as siblings.
Analogy: The > symbol is like saying "put this inside that." The + symbol is like saying "put this next to that." Together, they let you describe any layout structure in a single line.
8. Repeating Elements Using Multiplication
The * symbol is one of the most time-saving features in Emmet. It lets you repeat an element any number of times with a single keystroke.
Basic Multiplication
You type: Emmet generates:
───────── ────────────────────────
li*3 <li></li>
<li></li>
<li></li>
div*2 <div></div>
<div></div>
Multiplication with Nesting
You type: Emmet generates:
───────── ──────────────────────────
ul>li*4 <ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Auto-Numbering with $
Here's the magic trick. Add $ inside your text content and Emmet will automatically number each repeated element:
You type: Emmet generates:
───────────────── ──────────────────────────
ul>li*3{Item $} <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
The $ acts as a placeholder that increments by 1 for each repetition. This is incredibly handy when you're building lists, cards, or any repeated layout.
Seeing the Full Picture
Emmet abbreviation: ul>li*5{Item $}
What Emmet sees:
─────────────────────────────────────────────
ul → Create a <ul>
> li → Put <li> elements inside it
* 5 → Repeat the <li> five times
{Item $}→ Fill each one with "Item 1", "Item 2"...
What gets generated:
─────────────────────────────────────────────
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
9. Generating a Full HTML Boilerplate with Emmet
Every HTML file needs a basic structure to work properly — the <!DOCTYPE>, <html>, <head>, <title>, and <body> tags. Typing all of that from scratch every single time is tedious.
Emmet has a shortcut for the entire thing. Just type this:
!
That's it. A single exclamation mark. Press Tab, and Emmet generates:
<!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>
A complete, ready-to-go HTML file from one character. This is the single most useful Emmet shortcut for beginners.
What Each Part Does
<!DOCTYPE html> Tells the browser this is an HTML5 document
<html lang="en"> The root element. lang sets the language.
<head> Contains info about the page (not visible)
<meta charset="UTF-8"> Supports all characters and languages
<meta name="viewport" ...> Makes the page look right on mobile
<title>Document</title> The title shown in the browser tab
</head>
<body> Everything the user actually sees goes here
</body>
</html>
Top comments (0)