When you start learning HTML, writing tags feels slow and repetitive.
You type <div>, then </div>, again and again.
This is where Emmet makes life easier.
Let’s understand Emmet step by step, in a very simple way.
1. What is Emmet? (In very simple terms)
Emmet is a shortcut system for writing HTML faster.
Instead of writing full HTML tags, you write short abbreviations, and Emmet automatically expands them into proper HTML.
Think of Emmet as:
“Short code → Full HTML”
2. Why Emmet is useful for HTML beginners
As a beginner:
- HTML feels slow to type
- Too many opening and closing tags
- Easy to make small mistakes
Emmet helps you:
- Write HTML faster
- Avoid typing errors
- Focus on structure, not typing
You still learn HTML properly—Emmet just saves time.
3. How Emmet works inside code editors
Emmet works inside code editors, not in the browser.
Most modern editors support Emmet:
- VS Code (recommended)
- Sublime Text
- Atom
In VS Code, Emmet works by default.
You type an abbreviation → press Tab → HTML appears.
4. Basic Emmet syntax and abbreviations
Emmet uses symbols to describe HTML structure.
Some basics:
tag → creates an element
-
.→ class -
#→ id -
>→ child (nested) -
*→ repeat elements
Don’t worry—examples will make this clear.
5. Creating HTML elements using Emmet
Emmet
p
After pressing Tab:
<p></p>
Another example:
h1
Output:
<h1></h1>
One word → full HTML tag.
6. Adding classes, IDs, and attributes
Class example
Emmet:
p.text
Output:
<p class="text"></p>
ID Example
Emmet:
div#container
Output:
<div id="container"></div>
Class + ID together
Emmet:
div.box#main
Output:
<div class="box" id="main"></div>
7. Creating nested elements
Nesting means elements inside elements.
Emmet:
div>p
output:
<div>
<p></p>
</div>
Another example:
Emmet:
div>h1+p
Output:
<div>
<h1></h1>
<p></p>
</div>
>means inside.
8. Repeating elements using multiplication
You often need multiple similar elements.
Emmet:
li*3
Output:
<li></li>
<li></li>
<li></li>
With nesting:
Emmet:
ul>li*3
Output:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
This is very common in real projects.
9. Generating full HTML boilerplate with Emmet
Instead of writing full HTML structure manually…
Emmet:
!
(orhtml:5)
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
One shortcut → complete HTML page
Final Thoughts
- Emmet is a shortcut language for HTML
- It saves time but doesn’t replace learning HTML
- You can use it daily, even as a beginner
- Completely optional, but very powerful
Best way to learn Emmet: Try each example yourself in VS Code and once you get used to it, writing HTML without Emmet will feel… slow.
Top comments (0)