Emmet for HTML
A Beginner’s Guide to Writing Faster Markup
EMMET
Emmet is essentially "shorthand" for writing code.
Think of it like the autocorrect or text replacement on your phone. You know how you might type "omw" and your phone automatically expands it to "On my way!"? Emmet does the exact same thing for HTML and CSS.
You type a short abbreviation, hit a special key (usually Tab or Enter), and Emmet instantly expands it into full, valid code.
How does it works inside a code editor ?
Using the navigation menu example above, here is what you would do with Emmet:
You type this: nav>ul>li*5>a
You hit Tab, and it instantly becomes this:
HTML
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
Why It Matters
Speed: You can write hundreds of lines of code in seconds.
Accuracy: Since the computer generates the tags for you, you never forget a closing
</div>or misspell a tag name.Universal: It is built into almost every popular code editor (like VS Code) by default.
Before EMMET
Imagine you need to create a simple navigation menu. Without Emmet, you have to type every single character, bracket, and closing tag manually. It feels tedious, like this:
Type
<nav>Type
<ul>Type
<li>Type
<a href="">Type
HomeType
</a>Type
</li>...Repeat steps 3–7 four more times...
Type
</ul>Type
</nav>
That is a lot of typing, a lot of angle brackets < >, and a lot of chances to make a typo or forget to close a tag.
Basic Syntax and abbreviation
The Tag Name (The Basics)
If you want an HTML tag, just type its name. You don't need the brackets.
Type:
p→ Get:<p></p>Type:
h1→ Get:<h1></h1>
Classes and IDs (The Styling Hooks)
Emmet uses the same symbols as CSS: a dot for Classes and a hash for IDs.
The Class (
.):- Type:
p.intro→ Get:<p class="intro"></p>
- Type:
The ID (
#):- Type:
div#header→ Get:<div id="header"></div>
- Type:
The Implicit Div: If you type a class or ID without a tag name, Emmet assumes you want a
div.- Type:
.container→ Get:<div class="container"></div>
- Type:
Nesting (The Child Selector >)
Use the "greater than" symbol to put one element inside another.
Type:
ul>li→ Get:<ul> <li></li> </ul>
Multiplication (The Repeater *)
Use the asterisk to create multiple copies of an element. This is perfect for lists.
Type:
li*3→ Get:<li></li> <li></li> <li></li>
Siblings (The Neighbor Selector +)
Use the plus sign to place elements next to each other, rather than inside one another.
Type:
h1+p→ Get:<h1></h1> <p></p>
Creating HTML Element Using Emmet
A Practical Example
Let's combine these concepts to build a standard webpage section.
Goal: A "Chai" section (div) with a class of "chai", containing a Heading (h1) and a Button (button).
The Emmet Equation: div.hero > h1 + button
The Result →
<div class="chai">
<h1></h1>
<button></button>
</div>
Generating full HTML boilerplate with Emmet
Normally, starting a new HTML file requires remembering about 10-15 lines of standard setup code (the "boilerplate"). You need the Doctype, the HTML tags, the Head, the Body, and those complex Meta tags for mobile screens.
With Emmet, you just use the exclamation mark.
How to do it:
Open a new
.htmlfile.Type a single
!Press
Tab(orEnter).
The Result:
Emmet instantly expands that single character into the complete HTML5 standard structure:
<!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>
Using Emmet is an Option
It is important to remember that Emmet is a tool, not a rule.
Using Emmet doesn't mean you don't understand the code. It just means you are saving your mental energy for the unique parts of your website (the content and design) rather than wasting it on the repetitive setup that is the same for every single file.