Emmet is a tool designed to help developers save time while writing HTML and CSS by encapsulating pieces of code and loading them with the help of easy shortcuts, here's an example:
Lets say you are beginning a new HTML project, the first thing you do is create an index.html file, with the help of Emmet you can instantly have at your disposition an HTML boilerplate with the " ! " shortcut:
!
Then we press the TAB key to expand the code and voila!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Emmet includes abbreviations for every HTML tag:
div expands to <div></div>
a expands to <a href=""></a>
br expands to <br />
Emmet comes pre-equipped with CSS abbreviations as well, here are a few examples:
pos = position
bg = background
m = margin
c = color
fl:l = float-left
fl:r = float-right
Chain Abbreviations
You can also chain abbreviations with a CSS look-alike syntax,
Lets imagine we are going to create a form with an email as input:
form:post#sample-form>label[for=email]+input#email+button:s
- This creates a
withform
andmethod="post"
, we pass theid="sample-form"
character to create child elements, the first one is a label, then we add an>
withinput
and aid="email"
withbutton
:type="submit"
<form action="" method="post" id="sample-form">
<label for="email"></label>
<input type="text" id="email">
<button type="submit"></button>
</form>
Creating an enumerated list with this chained abbreviations
#wrapper>ul#sample-list>li.item-$*3>{Item $}
- Here
creates a div element with#wrapper
then we pass theid="wrapper"
character to reference>
children elements, then we create an unordered list or#wrapper
element withul
and then we pass theid="sample-list"
character again to create list-item or>
elements inside theli
, to end things we give every li element aul
whereclass="item-(1,2,3)"
becomes$
respectively:(1,2,3)
<div id="wrapper">
<ul id="sample-list">
<li class="item-1">Item 1</li>
<li class="item-2">Item 2</li>
<li class="item-3">Item 3</li>
</ul>
</div>
Setup / Installation
Fortunately Emmet is already built into some of the most used text editors, if your favorite text editor doesn't come with it, you can also download it as a plugin and check for specific instructions from their website.
Links
- Emmet Download https://emmet.io/download/
- Emmet Documentation https://docs.emmet.io/
- Cheat Sheet https://docs.emmet.io/cheat-sheet/
If you made it this far i hope this article helped you in one way or another, thanks for reading!