Faster Workflow: Mastering Emmet, Part 3

Share this article

In this part of the Emmet series we will learn about syntax and function.

Emmet syntax and Functions

Emmet uses syntax similar to CSS selectors for describing element positions inside generated tree and element attributes. You can use element names like div or p to generate HTML tags.

Applying Classes and ids with . and #

. is used to add classes to elements and # is used to add ids. Here are some example for ids and classes. You can apply multiple ids and classes to any element.



will generate

<ul class="nav nav-main nav-static"></ul>



will generate

<header id="site-header"></header>

As you can see in the above examples, I have applied multiple classes to the ul.

Child elements: >

> is used to to nest elements inside each other. You can use multiple times. It can be useful to create navigation menus and lists. See the code below i am going to create a nav menu with ul, list item and list item will be a link.


will generate the following nav menu. nav is a parent item, then we have ul as a child element and li with a tag as a grandchild.

			<a href=""></a>

Sibling: +

The + sign is used to create sibling items. It is useful to create elements near each other, on the same level. The following abbreviation will generate three siblings.

will output
<div class="main"></div>

Climb up: ^

With > you can create elements inside each other. But if you want to climb one level up in the created HTML tree, you will have to use the ^ symbol. Let’s see an example of the same abbreviation with different + and ^ operators.

Example 1: +


will generate the following code.


As you can see strong, blockquote and footer are nested inside the p paragraph tag, but we want to blockquote after p as a sibling element and footer as a different section. For this purpose we will have to use the ^ operator.

Example 2: ^

Type the following code and hit tab.


and we have the markup that we need:


Multiplication: *

Multiplication is one of the very useful features in Emmet. With the * operator you can define how many times element should be outputted. It can be very helpful to create navigation menus with multiple list items.


will generate an unordered list with five list item. I have also used the a tag to make the list items clickable links. You can replace 5 with your desired number.

		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>

Item numbering: $

We can use the multiplication *operator to repeat elements, but with $ we can number them. Use the $ operator inside an element’s name, attribute’s name or attribute’s value to output the current number of the repeated element. It can be used to create lists with numbering. Let’s see some examples of how the $ operator works.

Example 1: Item numbering

following mark up.

	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>

To add 0 (zero) before numbers, use multiple $ signs. li.item$$ will generate <li class="item01"></li> and li.item$$$ will generate <li class="item001"></li>.

Example 2: adding zero before numbers

out outs the following code. You can see 0 before numbers.

	<li class="item01"><a href=""></a></li>
	<li class="item02"><a href=""></a></li>
	<li class="item03"><a href=""></a></li>
	<li class="item04"><a href=""></a></li>
	<li class="item05"><a href=""></a></li>

Example 3: Changing direction

It is also possible to change the direction of numbering. Emmet uses the @- modifier to change the direction.


will out put following HTML markup, an unordered list with descending numbers.

	<li class="item05"><a href=""></a></li>
	<li class="item04"><a href=""></a></li>
	<li class="item03"><a href=""></a></li>
	<li class="item02"><a href=""></a></li>
	<li class="item01"><a href=""></a></li>

Changing the numbering base: Starting number

To change the counter base value, add a @N modifier to $. With this modifier you can set your desired starting number.


expands to the following markup.

	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
	<li class="item6"></li>
	<li class="item7"></li>

It is possible to use both base @N and direction @- modifier together. Here is an example.


will transform into the following markup.

	<li class="item7"><a href=""></a></li>
	<li class="item6"><a href=""></a></li>
	<li class="item5"><a href=""></a></li>
	<li class="item4"><a href=""></a></li>
	<li class="item3"><a href=""></a></li>

Grouping: ()

Grouping elements is also very easy with Emmet. You can use () to group elements or sections. With groups, you can literally write full page markup with a single abbreviation.

Let’s create the markup for our page with header, .main and footer.

(header>nav>ul>li*3>a)+(.main>article.primary>h1+p^aside#sidebar)+footer>p{© 2013}

will generate the following markup for our page.

			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>

<div class="main">
	<article class="primary">
	<aside id="sidebar"></aside>

	<p>© 2013</p>

Custom attributes with square brackets: [ ]

Emmet can use [attr] notation (as in CSS) to add custom attributes to your elements, for example for a link. It is useful to add default values to elements. You can place as many attributes as you like inside square brackets [ ]. If you don’t specify attribute values Emmet will produce tab stops inside each empty attribute (if your editor supports them).

Attribute without values

Example 1: No value

will generate the following markup with out any value.

<a href="" title=""></a>

Example 2: With default values

td[title="Hello world!" colspan=3]
will generate the following markup.

<td title="Hello world!" colspan="3"></td>

Example 3: Attribute with values (multiple or single)

a[href="" title="Learn HTML, CSS and more" target="_blank"]
will generate a link with default values.

<a href="" title="Learn HTML, CSS and more" target="_blank"></a>

Text: {}

Adding default text to elements is simple, you can use curly braces {} with any element a, p, h1 to add custom text.


a{click here}
will output

<a href="">click here</a>

More Complex Example: Here is one more complex example. If you type

p>{Click }+a{here}+{ to continue}
and hit Tab or Ctr+E to expand it, you will have the following markup.

<p>Click <a href="">here</a> to continue</p>

Dummy text with lorem ipsum

Web developers often use lorem ipsum text to add dummy data to their web pages, and to test how their HTML templates will look with real data. There are third party websites to generate lorem ipsum dummy text like and, but with Emmet you can generate lorem ipsum text on the fly.

Normally, lorem ipsum generates 30-word dummy text split into a few sentences, but with Emmet you can specify the number of words that should be generated right in the abbreviation.

Example 1: two paragraphs with default lorem ipsum


will generate two paragraphs with dummy content.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, eaque, molestiae saepe aut autem in earum magnam harum enim obcaecati eum pariatur sit suscipit nisi repellat quia a ipsum reiciendis!</p
<p>Ipsum, laudantium, quia suscipit qui officia autem dicta alias explicabo illo quis voluptas corporis eveniet laborum ducimus possimus quas debitis sunt quibusdam libero deserunt. Odit nemo beatae officiis perspiciatis delectus.</p>

Example 2: specifying the number of words

Just add the number after “lorem”. p>lorem10 will generate 10 words and p>lorem50 will generate paragraphs with 50 words.


will generate a paragraph with 10 words.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, asperiores.</p>

Example 3: List items with lorem ipsum

This abbreviation will create an unordered list with four items with dummy text and the class of item.


Here is the output.

<ul class="generic-list">
	<li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
	<li class="item">Quis, dolorum blanditiis reiciendis eius facere nulla porro.</li>
	<li class="item">Repellat, animi, nisi quibusdam esse distinctio nostrum blanditiis!</li>
	<li class="item">Neque, eius temporibus itaque nostrum tempore expedita ad?</li>

CSS Abbreviations

Emmet has a special CSS resolver that expands such abbreviations into a complete CSS property. For CSS syntax, Emmet has a lot of predefined snippets for properties. Just like HTML, you can expand abbreviations into complete CSS properties.

Here are some examples.

Example 1: Predefined abbreviation


and hit tab. you will get

font-family: ;

Example 2: Abbreviation with value


will output the following CSS code.

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

Example 3: Predefined abbreviation


will output following CSS code.

margin-right: ;

Example 4: Adding default value


will output following CSS code.

margin-right: 10px;

Example 5: Multiple values To add multiple values use a hypen to separate them:


will output following css code.

margin: 10px 20px;

Example 6: Adding a negative value will precede the first value with a hyphen and all the rest with double hyphens


will output following CSS code.

padding: -10px -20px;

Vendor Prefixes

Vendor prefixes are common nowadays to use CSS3 properties. Emmet makes it easy to use vendor prefixes. Moreover, in editors with tab stops support (such as Eclipse, Sublime Text 2, Espresso etc), Emmet will create a linked value placeholder so you can type a property value and it will be automatically placed in all generated properties.

Example 1: Box-sizing


will output following CSS code.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Example 2: Border Radius


will output following CSS code.

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

Example 3: Border Radius


will output the following CSS code.

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

Explicit vendor prefixed If you need to output CSS properties with specified vendor prefixed properties only, you can do it with Emmet. Let’s say you need to output transform property with webkit and moz prefixes only. In this case you can expand the following abbreviation:

Example: Border Radius


will output the following CSS code.

-webkit-transform: ;
-moz-transform: ;
transform: ;

CSS3 Gradients is a hard-to-write CSS3 feature, I cannot write it myself. I use an online CSS3 generator tools for CSS3 properties. Emmet makes it simple to write CSS3 gradients. Here’s what you need to type and the output you will get.


	lg(left, #fc0 30%, orange)

will output following css code.

	background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #fc0), to(orange));
	background-image: -webkit-linear-gradient(left, #fc0 30%, orange);
	background-image: -moz-linear-gradient(left, #fc0 30%, orange);
	background-image: -o-linear-gradient(left, #fc0 30%, orange);
	background-image: linear-gradient(left, #fc0 30%, orange);

You can see I have just used lg for liner gradient and added values. Emmet has turned my abbreviation into complete CSS3 code.

In the fourth and last part of this series, we’ll look at how Emmet handles existing markup and code.

Frequently Asked Questions about Mastering Emmet

How can I use Emmet to speed up my coding process?

Emmet is a plugin for text editors that greatly improves HTML & CSS workflow. It uses abbreviations that expand into complete HTML tags, saving you from typing out the entire code. For instance, typing ‘ul>li*5’ and pressing the ‘Tab’ key will generate an unordered list with five list items. The more you use Emmet, the more you’ll discover shortcuts and techniques to speed up your coding process.

How can I add attributes to a tag using Emmet?

Adding attributes to a tag using Emmet is straightforward. You simply include the attribute inside square brackets after the tag. For example, ‘a[href=”#”]’ will generate ‘‘. You can add multiple attributes by separating them with a space inside the brackets.

Can I use Emmet with my current text editor?

Yes, Emmet is compatible with most modern text editors including Sublime Text, Visual Studio Code, Atom, Brackets, and more. You just need to install it as a plugin or extension from your editor’s marketplace or package manager.

How can I use Emmet to generate Lorem Ipsum text?

Emmet provides a handy shortcut for generating Lorem Ipsum text. Simply type ‘lorem’ followed by the number of words you want, and press ‘Tab’. For example, ‘lorem10’ will generate 10 words of Lorem Ipsum text.

Can I create custom snippets in Emmet?

Yes, Emmet allows you to create your own snippets. This can be done by editing the ‘snippets.json’ file in your Emmet directory. You can define your own abbreviations and expansions to further customize your workflow.

How can I use Emmet for CSS coding?

Emmet is not just for HTML, it also provides numerous shortcuts for CSS. For example, ‘m10’ expands to ‘margin: 10px;’. You can also use Emmet to quickly generate vendor prefixes.

Can I use Emmet for responsive design?

Yes, Emmet can be a great tool for responsive design. It provides shortcuts for media queries, allowing you to quickly define breakpoints in your CSS.

How can I navigate through code with Emmet?

Emmet provides a feature called ‘Go to Edit Point’ which allows you to quickly navigate through your code. You can jump to the next or previous edit point using keyboard shortcuts.

Can I use Emmet with other programming languages?

While Emmet is primarily designed for HTML and CSS, it also supports other languages like XML, HAML, Pug, and SLIM. However, the functionality may vary depending on the language.

How can I improve my Emmet skills?

The best way to improve your Emmet skills is through practice. Try to incorporate Emmet into your daily coding routine. You can also refer to the Emmet documentation and cheat sheet for a comprehensive list of abbreviations and shortcuts.

Tahir TaousTahir Taous
View Author

Tahir Taous is founder of Just Learn WordPress, a training site where you can learn how to create and manage websites with WordPress, WordPress essential training, theme development courses free video tutorials and articles.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week