Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
If you’re new to HTML, you’ve probably felt this pain already. Typing the same tags again and again… opening, closing, indenting… it works, but it’s slow.
Let’s first see why this feels painful.
Writing HTML Without Emmet (Slow Way)
<divclass="card">
<h1>Hello</h1>
<p>This is a paragraph</p>
</div>
To write this, you had to:
Type every tag manually
Remember opening and closing tags
Manage indentation
Now imagine doing this 50 times a day
What is Emmet? (Very Simple Terms)
Emmet is a shortcut language for writing HTML faster. Think of Emmet like autofill for HTML.
Instead of writing full HTML code, you:
Type a short abbreviation
Press Tab
Your editor expands it into complete HTML
Example:
You type:
div>h2+p
Your editor creates:
<div>
<h2></h2>
<p></p>
</div>
Basic Emmet syntax and abbreviations
Emmet works using simple symbols that represent HTML structure.
You type an abbreviation → press Tab → HTML appears ⚡
Below are the most important Emmet syntax rules you’ll use every day.
Creating Elements
Just type the tag name.
Emmet:
p
HTML Output:
<p></p>
Emmet:
h1
HTML Output:
<h1></h1>
Child Elements (>)
Use > to place an element inside another.
Emmet:
div>p
HTML Output:
<div>
<p></p>
</div>
Sibling Elements (+)
Use + to create elements at the same level.
Emmet:
h2+p
HTML Output:
<h2></h2>
<p></p>
Classes (.)
Use . to add a class.
Emmet:
div.card
HTML Output:
<divclass="card"></div>
IDs (#)
Use # to add an id.
Emmet:
section#hero
HTML Output:
<sectionid="hero"></section>
Multiple Classes
Just chain classes using dots.
Emmet:
div.box.shadow.rounded
HTML Output:
<divclass="box shadow rounded"></div>
Repeating Elements ()
Use * to repeat an element.
Emmet:
li*3
HTML Output:
<li></li>
<li></li>
<li></li>
Grouping Elements with Parentheses ()
Use parentheses to control structure.
Emmet:
div>(h1+p)
HTML Output:
<div>
<h1></h1>
<p></p>
</div>
Text Elements {}
Use {} to add text content.
Emmet:
p{Hello World}
HTML Output:
<p>Hello World</p>
HTML Boilerplate Shortcut
Type:
!
Press Tab → complete HTML boilerplate generated
Generating full HTML boilerplate with Emmet
<!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>
