What is Emmet?
Emmet is a tool/plugin that comes preinstalled in the most popular Code editors. This tool helps developers to type HTML and CSS code much faster.
HTML Boilerplate code
! + Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>Document</title>
</head>
<body>
</body>
</html>
Emmet Shortcuts
1. Child ( > )
div>ol>li
<div>
<ol>
<li></li>
</ol>
</div>
Some more examples
div>a>img
<div>
<a href="">
<img src="" alt="">
</a>
</div>
2. Sibling ( + )
h1+h2+p
<h1></h1>
<h2></h2>
<p></p>
Some more examples
div+a+p
<div></div>
<a href=""></a>
<p></p>
3. Text ( {} )
h1{LearnCodeOnline}
<h1>LearnCodeOnline</h1>
Some more examples
a{LCO}
<a href="">LCO</a>
button{Submit}
<button>Submit</button>
4. Multiplication ( * )
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
5. ID and Classes (# .)
#lco
<div id="lco"></div>
.lco
<div class="lco"></div>
<p class="center"></p>
Some more examples
span.span.center.pink
<span class="span center pink"></span>
p.center#lco
<p class="center" id="lco"></p>
6. Attributes ( : )
a:mail
<a href="mailto:"></a>
Some more examples
a:link
<a href="http://"></a>
a:blank
<a href="http://" target="_blank" rel="noopener noreferrer"></a>
a:tel
<a href="tel:+"></a>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
input:button
<input type="button" value="">
input:checkbox
<input type="checkbox" name="" id="">
input:color
<input type="color" name="" id="">
input:datetime
<input type="datetime" name="" id="">a
input:email
<input type="email" name="" id="">
input:file
<input type="file" name="" id="">
input:hidden
<input type="hidden" name="">
input:image
<input type="image" src="" alt="">
input:password
<input type="password" name="" id="">
button:s | button:submit
<button type="submit"></button>
button:d | button:disabled
<button disabled="disabled"></button>
button:r | button:reset
<button type="reset"></button>
7. Custom Attributes ( [ ] )
input[value="User Name"]
<input type="text" value="User Name">
Some more examples
p[title="Prahlad Inala"]
<p title="Prahlad Inala"></p>
td[rowspan=2]
<td rowspan="2"></td>
td[colspan=2]
<td colspan="2"></td>
[title="Prahlad Inala"]
<div title="Prahlad Inala"></div>
8. Grouping ( () )
div>(header>ul>li*3>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
9. Naming and Numbering ( $ )
ul>li.lco$*5
<ul>
<li class="lco1"></li>
<li class="lco2"></li>
<li class="lco3"></li>
<li class="lco4"></li>
<li class="lco5"></li>
</ul>
h1{Hello $}*3
<h1>Hello 1</h1>
<h1>Hello 2</h1>
<h1>Hello 3</h1>
h$.lco${Hitesh $}*3
<h1 class="lco1">Hitesh 1</h1>
<h2 class="lco2">Hitesh 2</h2>
<h3 class="lco3">Hitesh 3</h3>