Emmet CheatSheet

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

The project was started by Vadim Makeev in 2008 and continues to be actively developed by Sergey Chikuyonok and Emmet users. Since 2015 Mikael Geletsyan is responsible for UX at Emmet. The tools have been incorporated into several popular text editors, as well as some plug-ins developed by the Emmet team and others implemented independently. However, Emmet is primarily independent from any text editor, as the engine works directly with text rather than with any particular software.

Emmet is a must use web developer toolkit. With Emmet you can rapidly create your markup. You write simple abbreviations and just press Tab or Ctrl+E or any other other supported keyboard shortcut and Emmet expands the simple abbreviations into complex HTML and CSS code snippets. Emmet will make your HTML and CSS workflow much faster.

Let us start to improve your development to the speed of light.

• Emmet in Visual Studio Code (code.visualstudio.com)
• Emmet 2 for Sublime Text (github.com)
• Emmet for Coda (emmet.io)
• Emmet for Atom (github.com)

The answer to that is simple: to make your coding workflow faster. Emmet lets you write lightning-fast code. Simple CSS-like abbreviations expand into complex code. You can generate lorem ipsum text easily, use many keyboard shortcuts, and much more.

Emmet uses CSS-like selector syntax, You write CSS-like abbreviations, place your cursor at the end of abbreviation, and then press Tab, Ctrl+E, or any other keyboard key configured to expand abbreviations into actual HTML code. Emmet expands a into . You can also specify values, but if you dont specify values, will produce with tab stops inside each empty attribute. You can insert a target URL and hit Tab to go to the next edit point, where you can insert the next desired value.

While Emmet abbreviations are good for generating HTML, XML, or any other structured markup, they are also very useful for CSS. Emmet provides you with shorthand for CSS properties. For CSS syntax, Emmet has many predefined snippets for properties. you can expand the bd abbreviation to get a border: ; snippet, and br for border-right:;. You can also specify a value for this property. Just type bl:10 for border-left: 10px;.

If you want to specify multiple values, use a hyphen to separate them: m10-20 expands to margin: 10px 20px;. To specify negative values, precede the first value with a hyphen and all the rest with double hyphens: m-10--20 expands to margin: -10px -20px;

ul>li*5

Preview

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

nav>ul>li

Preview

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

p[title="Hello world"]

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

td[rowspan=2 colspan=3 title]

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

[a='value1' b="value2"]

<div a="value1" b="value2"></div>

a

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

p>{Click }+a{here}+

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

#header

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

.title

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

form#search.wide

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

p.class1.class2.class3

<p class="class1 class2 class3"></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>

div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

div+div>p>span+em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

div+div>p>span+em^^bq

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

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)*4)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

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="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

ul>li.item$$$*3

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

ul>li.item$@-*3

<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

ul>li.item$@2*3

<ul>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
</ul>

Emmet for HTML:

Creating an element by its name: In HTML, as you type in the name of the HTML tag, you will get a suggestion list, select the element that you want to insert from the suggestion list. For example, if you type h1 and click enter to get the <h1></h1>. You can do this for all HTML tags as well.

Creating an element by its class name: In HTML, if you want to create an element with a particular class name then first enter the name of the element and '. ' and the name of the class which you like to give to the element and hit enter. The element will be created with the class name you specified.

Creating an element by its id: In HTML, if you want to create an element with a particular id then first enter the name of the element and ' # ' and the id which you like to give to the element and hit enter. The element will be created with the id you specified.

Creating Multiple elements: If you want to create multiple elements using emmet then specify the name of the element and " * " and specify how many elements of that type you want and hit enter.

Creating nested elements: You can create nested elements by using " > " and type the outer element name and enter " > " and enter inner elements and hit enter to get the desired output.

Emmet in CSS:

In CSS, when you start typing, Emmet starts giving you suggestions where you can select and hit enter. In CSS, you can get both the property name and value in suggestions.