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:
<!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)
<!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)
<div class=""></div>- .classname (dot + classname)
<div class="classname"></div>- elementname (like p)
<p></p>- > (child) like div>p
<div>
<p></p>
</div>- + (sibling) like h1+p
<h1></h1>
<p></p>- * (multiplication) like li*5
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>- $*number (numbering) like li.item$*5
<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}
<p>hello by punyansh singla</p>ID and classnames using Emmet
- elementname#idname like p#paragraph
<p id="paragraph"></p>- elementname.classname like p.long-para
<p class="long-para"></p>Attributes using Emmet
- input[attribute][attribute] like input[type=number][min=3]
<input type="number" min="3">We can combine selectors in one line
- nav>ul>li*3>a[href=#]{Link $}
<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}
<div class="footer">
<span>2026</span>
<a href="#">Privacy</a>
<a href="#">Terms</a>
</div>