Emmet for HTML: A Beginner's Guide to Writing Faster Markup
You know that feeling when you're building a webpage and you have to type out every single HTML tag, close it properly, add attributes, nest elements... and it just feels slow?
Yeah, I've been there too.
I remember spending way too much time just typing <div class="container">, then scrolling to close it with </div>, making sure I didn't miss anything. And if I needed to create 10 list items? Copy-paste became my best friend.
Then I discovered Emmet.
And honestly? It felt like unlocking a cheat code for HTML.
Let me show you what I mean.
What is Emmet? (The Simple Version)
Emmet is basically a shortcut language for writing HTML (and CSS, but we'll focus on HTML here).
Instead of typing out full HTML tags, you write short abbreviations, hit a key (usually Tab or Enter), and Emmet instantly expands it into proper HTML code.
Think of it like autocomplete, but way smarter.
For example:
Type
div→ PressTab→ Get<div></div>Type
ul>li*3→ PressTab→ Get a full unordered list with 3 items
Wait, what? Yeah, it gets even cooler. Stick with me.
Why Should You Care About Emmet?
Here's why I think every beginner should learn Emmet early:
1. You write HTML way faster
No more typing opening and closing tags manually. Emmet does it for you.
2. You make fewer mistakes
Ever forget to close a </div>? With Emmet, tags are always properly paired.
3. It's already built into most editors
VS Code, Sublime Text, Atom—they all support Emmet out of the box. No installation needed.
4. It makes complex structures easier
Need a navigation menu with 5 links? Or a card layout with multiple nested divs? Emmet handles it in seconds.
5. Once you learn it, you'll never go back
Seriously. After using Emmet, writing HTML the old way feels... painful.
How Emmet Works Inside Your Code Editor
Before we dive into syntax, let's quickly understand how to use Emmet.
Step 1: Open your HTML file in VS Code (or any editor that supports Emmet).
Step 2: Start typing an Emmet abbreviation.
Step 3: Press Tab (or Enter in some editors).
Step 4: Watch the magic happen.
That's it.
No plugins. No setup. It just works.
Here's a quick example:
Type: h1
Press: Tab
Result: <h1></h1>
Your cursor will automatically be placed inside the tag, ready for you to type content.
Creating HTML Elements Using Emmet
Let's start with the basics: generating single HTML elements.
Single Elements
div → <div></div>
p → <p></p>
h1 → <h1></h1>
span → <span></span>
button → <button></button>
Super simple, right?
But here's where it gets interesting.
Self-Closing Elements
Emmet is smart enough to know which elements don't need closing tags:
img → <img src="" alt="">
input → <input type="text">
br → <br>
hr → <hr>
Notice how img automatically includes src and alt attributes? Emmet knows what attributes are commonly used and adds them for you.
Adding Classes and IDs
Now let's make things more practical.
In real projects, you'll almost always need classes and IDs. Here's how Emmet handles them:
Classes
Use a dot (.) to add a class:
div.container
Press Tab →
<div class="container"></div>
You can add multiple classes:
div.card.shadow.rounded
Result:
<div class="card shadow rounded"></div>
IDs
Use a hash (#) for IDs:
div#header
Result:
<div id="header"></div>
Combining Classes and IDs
div#main.container.flex
Result:
<div id="main" class="container flex"></div>
Adding Custom Attributes
What if you need to add custom attributes like data-* or href?
Use square brackets:
a[href="https://example.com"]
Result:
<a href="https://example.com"></a>
You can combine this with classes:
button.btn[type="submit"]
Result:
<button class="btn" type="submit"></button>
Or add multiple attributes:
img[src="logo.png"][alt="Company Logo"]
Result:
<img src="logo.png" alt="Company Logo">
Creating Nested Elements
This is where Emmet really starts to shine.
Use the > symbol to create child elements:
div>p
Result:
<div>
<p></p>
</div>
You can nest as deep as you want:
div>ul>li
Result:
<div>
<ul>
<li></li>
</ul>
</div>
Sibling Elements
Use + to create elements at the same level:
div>h1+p
Result:
<div>
<h1></h1>
<p></p>
</div>
Climbing Up
Use ^ to go back up one level:
div>ul>li^p
Result:
<div>
<ul>
<li></li>
</ul>
<p></p>
</div>
Notice how <p> is a sibling of <ul>, not a child of <li>.
Repeating Elements with Multiplication
Here's one of my favorite Emmet features: multiplication.
Use * to repeat elements:
ul>li*5
Result:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
This is so useful for creating lists, navigation menus, or any repeating structure.
Adding Classes to Repeated Elements
ul>li.item*3
Result:
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
Numbering with $
Want numbered classes or IDs? Use $:
ul>li.item$*3
Result:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
You can even pad numbers with zeros:
ul>li.item$$$*3
Result:
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>
Grouping with Parentheses
Sometimes you need to group elements together. Use () for that:
div>(header>h1)+(main>p)+(footer>p)
Result:
<div>
<header>
<h1></h1>
</header>
<main>
<p></p>
</main>
<footer>
<p></p>
</footer>
</div>
This keeps your Emmet abbreviations organized and readable.
Real-World Example: Building a Card Component
Let's put everything together and build a common UI component—a card.
Here's the Emmet abbreviation:
.card>(.card-header>h2.title)+(.card-body>p.description)+(.card-footer>button.btn)
Press Tab →
<div class="card">
<div class="card-header">
<h2 class="title"></h2>
</div>
<div class="card-body">
<p class="description"></p>
</div>
<div class="card-footer">
<button class="btn"></button>
</div>
</div>
That would've taken forever to type manually. With Emmet? Done in seconds.
Generating Full HTML Boilerplate
Here's a game-changer I wish I knew earlier:
Just type ! and press Tab.
Result:
<!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>
Boom. Full HTML5 boilerplate in one keystroke.
No more searching for templates or copy-pasting from old projects.
Common Emmet Patterns You'll Use Daily
Here are some shortcuts I use all the time:
Navigation Menu:
nav>ul>li*5>a
Form with Inputs:
form>input[type="text"]+input[type="email"]+button[type="submit"]
Grid Layout:
.container>.row>.col*3
Article Structure:
article>header>h1+p^^section>p*3
Try these in your editor. Play around. Break things. That's how you learn.
Tips for Learning Emmet
1. Start small
Don't try to learn everything at once. Master basic elements first, then add classes, then nesting.
2. Practice with real projects
Use Emmet every time you write HTML. It'll become muscle memory.
3. Use the cheat sheet
Keep the Emmet cheat sheet bookmarked. I still refer to it sometimes.
4. Experiment in the editor
Type random abbreviations and see what happens. That's how I learned most tricks.
5. Remember: Emmet is optional
You don't have to use it. But once you do, you'll wonder how you ever coded without it.
Final Thoughts
Emmet isn't magic. It's just a tool.
But it's a really good tool.
It won't make you a better developer overnight. But it will make you a faster one.
And in this field, speed matters—not because you should rush, but because the less time you spend on repetitive tasks, the more time you have for creative problem-solving.
So give Emmet a try. Open your editor. Type ! and press Tab.
See what happens.
I think you'll like it.
Happy coding!
— Saurabh
About the Author
Hey! I'm Saurabh Prajapati, a full-stack software engineer at IBM India Software Lab, where I work on Maximo building cloud-native enterprise solutions.
I love exploring new tools and technologies and sharing what I learn along the way. If you're into web development, AI-powered tools, or modern JavaScript, let's connect!
GitHub: prajapatisaurabh
LinkedIn: saurabh-prajapati
Email: saurabhprajapati120@gmail.com
Currently available for interesting projects and collaborations. Let's build something cool together!
