Navigation: <Root level>

Emmet cheat sheet

 

 

 

 

HTML


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

Child: >

Climb-up: ^

div>ul>li

<div>

  <ul>

    <li></li>

  </ul>

</div>


 

div>p>span+em^bq

<div>

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

  <blockquote></blockquote>

</div>


 

Sibling: +

Custom attributes

div+p

<div></div>

<p></p>


 

p[title="Hello world"]

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

 

 

td[rowspan=2 colspan=3 title]

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

 

Multiplication: *

Text: {}

ul>li*3

<ul>

  <li></li>

  <li></li>

  <li></li>

</ul>


 

a{Click me}

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


 

p{@lorem4}

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

Item numbering: $

Id and class attributes

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>


 

 

Implicit tag names

 

.class

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

 

ul>.class

<ul>

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

</ul>

 

em>.class

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

 

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>lorem5.item*4

<ul class="generic-list">

<li class="item">Lorem ipsum instructior quaestio suspendisse.</li>

<li class="item">Accusam putant quam everti fuisset.</li>

<li class="item">Novum fames; Voluptua mandamus amet.</li>

<li class="item">Ultrices iudico euismod sententiae conubia.</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>

 

 

p*3>lorem5 or (p>lorem5)*3

<p>Lorem ipsum tale libris! Ius!</p>

<p>Dissentiet esse alienum; Nominati liberavisse.</p>

<p>Condimentum ludus argumentum dignissim montes.</p>


 

lorem20

Lorem ipsum sea persecuti eum dis labores es neque. Sententiae his oratio nonummy habitasse causae sadipscing reformidans senectus magnis vehicula.


 


 

Note that the Lorem Ipsum generator can use both standard Emmet abbreviations and a RJ Emmet flavor. E.g. p*4>lorem80 can be written as p{@lorem80}*4. The Lorem Ipsum abbreviation variable "@lorem" is put inside text braces {}, just as plain text.

 


Filters


Filters can be used to modify the output. Each filter must start with a |-pipe and be added at the end of the abbreviation. It's possible to add several filters. E.g.  #content>p.title|e|s

 

c

Comment important tags. Important tags are those containing class or id attributes. The comment is placed at a new line after the closing tag.

     

e

Escape XML-unsafe characters: <, > and &.

 

Ex.

<p>|e result in the following output:

&lt;p&gt;&lt;/p&gt;

s

Single line. Expand everything to a single line of code.

 

t

Trim line markers from wrapped lines e.g. "* ", "- " or "1."


Ex.

Selected text

* Line 1

* Line 2
 

ul>li*|t gives the output:

 

<ul>

  <li>Line 1</li>

  <li>Line 2</li>

</ul>


 

w or w<x>

Wordwrap selected or lorem generated text. Default width is 80. To wrap at a different column just add the column. E.g. |w120 will wrap at column 120.


 

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.


When wrapping lists - the trim filter "|t", at the end of the abbreviation, can be used to strip all list markers like * or numbers.

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

1. Information

2. Content

3. News

4. About
 

nav>ul.nav>li.nav-item$*>a|t 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.

 

-bb 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: |;


 

Markdown


It's possible to use abbreviations in markdown documents. Supported abbreviations are:

 

a           link

b           bold

bq          blockquote

code        inline code snippet

h1..h6      heading

hr          horizontal rule

i           italic

img         image

ol          ordered list

pre         code block with language based highlighting

strike      strike through

table       table

ul          unordered list

@l or @l80  create lorem generated text

 

 

 

 

 

 

 

 

Copyright © 2022 Rickard Johansson