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
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:
, we pass the
character to create child elements, the first one is a label, then we add an
<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
creates a div element with
then we pass the
character to reference
children elements, then we create an unordered list or
and then we pass the
character again to create list-item or
elements inside the
, to end things we give every li element a
<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.
If you made it this far i hope this article helped you in one way or another, thanks for reading!
Create your free account to unlock your custom reading experience.