Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
What is Emmet?
Emmet is a time-saving tool for web developers that lets you write shortcuts that convert automatically into full blocks of HTML or CSS code. For example, if you have to write boilerplate code, without Emmet you would write it in the following steps:
first
<html></html>then
<body></body>inside<html></html>then you will add
<head></head>in<body></body>then
<title></title>in head
Then you will start writing the main code, but with Emmet you will just write ! and press enter and boom—you see this in your code editor:
html
Copy
<!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>
Why Emmet is useful for HTML beginners
Emmet helps beginners write code faster and with less effort. It removes unnecessary typing and lets you focus on learning how HTML and CSS actually work. As a beginner, you should focus on learning concepts more than manual typing. Emmet allows you to use shortcuts instead of writing the same long, repetitive code over and over again. Emmet increases your speed of writing HTML and CSS code.
How Emmet works inside the code editor
When we type any Emmet shortcut in a code editor like Sublime or VS Code, the Emmet engine runs in the background, parses the shortcut in real-time, and converts the shortcut to complete, long code. It happens very fast, in just milliseconds.
Basic Emmet syntax and abbreviations
- ! (exclamation mark)
html
Copy
<!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>
- . (dot)
html
Copy
<div class=""></div>
- .classname (dot + classname)
html
Copy
<div class="classname"></div>
- elementname (like p)
html
Copy
<p></p>
- \> (child) like div>p
html
Copy
<div>
<p></p>
</div>
- + (sibling) like h1+p
html
Copy
<h1></h1>
<p></p>
- (multiplication) like li5
html
Copy
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
- $*number (numbering) like li.item$*5
html
Copy
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
- {} (content) like p{hello by punyansh singla}
html
Copy
<p>hello by punyansh singla</p>
ID and classnames using Emmet
- elementname#idname like p#paragraph
html
Copy
<p id="paragraph"></p>
- elementname.classname like p.long-para
html
Copy
<p class="long-para"></p>
Attributes using Emmet
- input[attribute][attribute] like input[type=number][min=3]
html
Copy
<input type="number" min="3">
We can combine selectors in one line
- nav>ul>li*3>a[href=#]{Link $}
html
Copy
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
- div.footer>span{2026}+a[href=#]{Privacy}+a[href=#]{Terms}
html
Copy
<div class="footer">
<span>2026</span>
<a href="#">Privacy</a>
<a href="#">Terms</a>
</div>
Creating Nested Elements
This is where Emmet shines.
Example: Parent → Child
Emmet
div>p
HTML
<div>
<p></p>
</div>
Realistic Example
Emmet
div.card>h2+p
HTML
<div class="card">
<h2></h2>
<p></p>
</div>
You’re describing structure—not typing it.
Repeating Elements Using Multiplication
Need multiple items? Don’t copy-paste.
Example
Emmet
li*3
HTML
<li></li>
<li></li>
<li></li>
Nested + Repeated (Common Pattern)
Emmet
ul>li*3
HTML
<ul>
<li></li>
<li></li>
<li></li>
</ul>