.svg)
.webp)
Emmet is a plugin for almost all of the most popular code editors and Integrated Development Environments (IDE) that speeds up working with CSS and creating HTML, XML, and XSL structures. It was created in 2008 by Vadim Makeev, but now it is developed by Sergey Chikuyonok and Emmet's community.
Installing Emmet
To start working with Emmet, you need either code editor/IDE with a built-in plugin or have to download and install it appropriately to your code editor. The installation process is different for every editor, but you usually install the downloaded file with the use of editor plugins installation.
Usage
To use Emmet you just need to write a special expression that will be extended to adequate blocks of code. Here is an example of such an abbreviation:
html>head>title{Hello}^body>p{Hello World!}
Expanding is done by default by pressing the Tab key. This expressions will be transformed into:
<html>
<head>
<title>Hello</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
One important thing to remember - you cannot use spaces in expressions between operators!
html>head>title{Hello}^body>p{Hello World!}
Syntax
To generate a single HTML element you simply need to write the tag name as an expression and then expand it:
div → <div></div>
p → <p></p>
a → <a href=””></a>
Emmet allows creating more complex HTML structures - this is done with the use of various operators. The most used ones are:
- child: >
Allows to nest elements - div>p>a becomes:<div>
<p>
<a href=””></a>
</p>
</div> - siblings: +
Allows to add elements as siblings - div+p+a becomes:<div></div>
<p></p>
<a href=””></a>
- back to parent: ^
Allows to climb up in the tree structure - div>p^div>p becomes:<div>
<p></p>
</div>
<div>
<p></p>
</div> - multiplication: *
Allows to multiply one element - ul>li*3 becomes:<ul>
<li></li>
<li></li>
<li></li>
</ul>
- grouping: ()
Allows to group elements into 1 abbreviations - div>(ul>li*3>a)+p becomes:<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<p></p>
</div>
Of course there is also a possibility to add classes and IDs to elements - you just have to use # (hash) to specify ID and . (dot) to specify class.
div#main → <div id=”main”></div>
div.main → <div class=”main”></div>
To add more than one class you have to add you have to add another dot followed by class name after the first one.
div.main.container → <div class=”main container”></div>
Emmet also allows to add custom attributes to an element with the use of brackets:
a[title=”Link” target=”_blank”] → <a href="" title="”Link”" target="”_blank”"></a>
You can enumerate any attribute with the $ operator - it will be replaced by the current iteration index. In this situation ul>li.item$*3 becomes:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
If you want to include leading zero you will have to use double $$ operator, so ul>li.item$$*10 can change into:
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
<li class="item04"></li>
<li class="item05"></li>
<li class="item06"></li>
<li class="item07"></li>
<li class="item08"></li>
<li class="item09"></li>
<li class="item10"></li>
</ul>
There is an option to decrease numbers - you simply have to add @- after $, so ul>li.item$@-*3 can become:
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
You can also change counter base value and change ul>li.item$@3*3 into:
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
It's similar with the decrease operator, when ul>li.item$@-3*3 can be changed into:
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
Apart from that, Emmet also gives the possibility to insert text into a tag with the use of curly brackets, so we can change p{Lorem }>a{ipsum}+{ dolor} into:
<p>Lorem <a href="">ipsum</a> dolor</p>
As I've mentioned before, spaces do not work with Emmet. Using curly brackets {} and square brackets [] allows to use space to separate text and attributes.
CSS
Emmet also has predefined snippets for CSS properties. If you want to add padding to an element you need to use p10. It will automatically transform p into padding and 10 into 10px.
m10 → margin: 10px;
There is an option to add negative value:
m-10 → margin: -10px;
Default value is px, but you can use another ones, such as:
p → %
e → em
x → ex
For example:
p15p → padding: 15%;
If you want to use different values for properties, you can separate them with pipe:
p10|15 → padding: 10px 15px;
p2|3|4|5 → padding: 2px 3px 4px 5px;
Emmet also supports hex colors values:
#f → #ffffff
#f0 → #f0f0f0
#f01 → #ff0011
You can mix different abbreviations:
b5s#0 → border: 5px solid #000000;
Keep in mind that Emmet can only provide shorthands for CSS properties. When your code editor has a good autocomplete feature or support for CSS snippets, then you might want to stick with those.
Conclusion
Have you ever found writing a lot of HTML elements to be dull? Bore no more and just use Emmet to speed up your HTML workflow! As I’ve proven in this article, with only one-line expressions you can create large HTML structures within seconds. Emmet is an open source plugin that supports many IDEs and code editors. Installing it is as easy as one-two-three, so start using it today!
Navigate the changing IT landscape
Some highlighted content that we want to draw attention to to link to our other resources. It usually contains a link .
