HTML

Unknown abbreviations will be expanded as tags. E.g. foo => <foo></foo>.


Child: >

Sibling: +

Climb-up: ^

div>ul>li

<div>

<ul>

<li></li>

</ul>

</div>


div+p

<div></div>

<p></p>


div>p>span+em^bq

<div>

<p><span></span><em></em></p>

<blockquote></blockquote>

</div>


Multiplication: *

Custom attributes

Text: {}

ul>li*3

<ul>

<li></li>

<li></li>

<li></li>

</ul>


p[title="Hello world"]

<p title="Hello world"></p>


td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>


a{Click me}

<a href="">Click me</a>


p{@lorem4}

<p>Lorem Ipsum quisque etiam.</p>


Item numbering: $

Id and class attributes

Implicit tag names

ul>li.item$*3

<ul>

<li class="item1"></li>

<li class="item2"></li>

<li class="item3"></li>

</ul>


h$[title=item$$$]{Header $}*3

<h1 title="item001">Header 1</li>

<h2 title="item002">Header 2</li>

<h3 title="item003">Header 3</li>


ul>li.item$3-5

<ul>

<li class="item3"></li>

<li class="item4"></li>

<li class="item5"></li>

</ul>


#header

<div id="header"></div>


.title

<div class="title"></div>


form#search.wide

<form id="search" class="wide"></form>


p.class1.class2

<p class="class1 class2"></p>


.class

<div class="class"></div>


em>.class

<em><span class="class"></span></em>


ul>.class

<ul>

<li class="class"></li>

</ul>


table>.row>.col

<table>

<tr class="row">

<td class="col"></td>

</tr>

</table>


Grouping: ()

Lorem Ipsum generator: @lorem


div>(header>ul>li*2>a)+footer>p

<div>

<header>

<ul>

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

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

</ul>

</header>

<footer>

<p></p>

</footer>

</div>


(div>dl>(dt+dd)*2)+footer>p

<div>

<dl>

<dt></dt>

<dd></dd>

<dt></dt>

<dd></dd>

</dl>

</div>

<footer>

<p></p>

</footer>


ul.generic-list>.item{@lorem10}*4

<ul class="generic-list">

<li class="item">Lorem Ipsum instructior quaestio suspendisse insolens; Hinc rebum sapientem. Alienum.</li>

<li class="item">Lorem Ipsum utroque splendide reprimique verterem antiopam soluta bibendum philosophia.</li>

<li class="item">Lorem Ipsum saepe accusam. Justo assentior vivendum iaculis eligendi ipsum.</li>

<li class="item">Lorem Ipsum dolorem? Nulla platea elitr, invenire animal torquent democritum.</li>

</ul>


p{@lorem20}

<p>Lorem Ipsum tale libris! Ius! Rationibus habeo? Splendide volutpat senserit. Reprimique antiopam duis reprehendunt ancillae sem expetenda eum? Singulis? Epicuri.</p>




Note that the Lorem Ipsum generator abbreviation is used differently in standard Emmet. E.g. p*4>lorem80 is written as p{@lorem80}*4 in RJ Emmet. The Lorem Ipsum abbreviation variable "@lorem" is put inside text braces {}, just as plain text.


Wrap with Abbreviation

This is a very useful feature of Emmet and lets you enter an abbreviation, expands it and place currently selected content in the last element of generated snippet.

You can also use placeholders $# to control where selected text should be inserted.

Wrapping individual lines

This feature is very useful when you need to wrap text in tags. For example lists. Below are a few examples.


Selected text

Information

Content

News

About


ul>li* gives the following output:

<ul>

  <li>Information</li>

  <li>Content</li>

  <li>News</li>

  <li>About</li>

</ul>


Selected lines are wrapped inside HTML tags.


Selected text

Information

Content

News

About


nav>ul.nav>li.nav-item$*>a gives the following output:

<nav>

  <ul class="nav">

    <li class="nav-item1"><a href="">Information</a></li>

    <li class="nav-item2"><a href="">Content</a></li>

    <li class="nav-item3"><a href="">News</a></li>

    <li class="nav-item4"><a href="">About</a></li>

  </ul>

</nav>


Control output with placeholders $#

Emmet insert selected text inside the latest element. If you want more control over where the selected text is inserted you can use placeholders $#.


Selected text

Information

Content

News

About


ul>li[title=$#]*>{$#}+img[alt=$#] gives the output:

<ul>

  <li title="Information">Information<img src="" alt="Information" /></li>

  <li title="Content">Content<img src="" alt="Content" /></li>

  <li title="News">News<img src="" alt="News" /></li>

  <li title="About">About<img src="" alt="About" /></li>

</ul>

CSS

It's possible to use vendor prefix with abbreviations. E.g. -moz-ac will expand into -moz-align-content: |;

You can also use the macro prefixes -, -v-, -m-, -w- to expand into several lines with predefined vendor prefixes. Note that multi cursors are used to edit each line.


- or -v-bb

-webkit-border-bottom: |;

-moz-border-bottom: |;

border-bottom: |;


-w-bb

-webkit-border-bottom: |;

border-bottom: |;


-m-bb

-moz-border-bottom: |;

border-bottom: |;