Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
Typing every <div>, </div>, and the attribute gets tedious. Emmet is a shorthand language that expands into full HTML.
What is Emmet?
Emmet turns abbreviations into complete HTML. It's built into VS Code and most editors:
div → <div></div>
No more typing angle brackets or forgetting closing tags.
Basic Element Creation
p → <p></p>
h1 → <h1></h1>
article → <article></article>
Just type the tag name and hit Tab.
Adding Classes and IDs
.container → <div class="container"></div>
#header → <div id="header"></div>
button.submit → <button class="submit"></button>
The . means class, # means ID.
Multiple Classes and Attributes
div.box.large.hidden → <div class="box large hidden"></div>
input[type=text][placeholder] → <input type="text" placeholder="">
a[href="#"][target=_blank] → <a href="#" target="_blank"></a>
Nesting Elements
nav>ul>li → <nav><ul><li></li></ul></nav>
div>p+span → <div><p></p><span></span></div>
> = child, + = sibling.
Repeating Elements
ul>li*3 → <ul><li></li><li></li><li></ul>
div.row*4 → <div class="row"></div> (repeated 4 times)
*n creates n copies.
Complete HTML Boilerplate
! → Full HTML5 document
Expands to:
<!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>
Real-World Examples
Navigation menu:
nav>ul>li*3>a[href="#"]
Expands to:
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
Form with inputs:
form>.form-group*2>label+input
Expands to:
<form>
<div class="form-group">
<label></label>
<input>
</div>
<div class="form-group">
<label></label>
<input>
</div>
</form>
How to Use Emmet
VS Code: Built-in—just type and press
TabOther editors: Install Emmet extension
Try it: Type an abbreviation and watch suggestions appear
Quick Reference
| Emmet | HTML Output |
div | <div></div> |
.header | <div class="header"></div> |
ul>li*3 | <ul><li></li><li></li><li></li></ul> |
h1{Title} | <h1>Title</h1> |
p.text.large | <p class="text large"></p> |
Pro tip: Emmet works in CSS too (m10 → margin: 10px;). Start with simple abbreviations, build up to complex structures. It'll become muscle memory.
Enjoyed reading this blog? Let's connect!
🐦 Twitter/X: @rohan_gupta96
💼 LinkedIn: https://www.linkedin.com/in/rohangupta9896
🐙 GitHub: https://github.com/rohan9896