Emmet Cheat Sheet

What is Emmet?

Emmet is a plugin for many popular text editors that greatly improves HTML and CSS workflow. It allows developers to write abbreviated code that can be expanded into full-fledged HTML and CSS syntax, saving significant time and reducing the potential for errors. Emmet is widely used in web development due to its powerful features and ease of use.

Why Use Emmet?

  • Speed and Efficiency
  • Error Reduction
  • Powerful Features

How to Use Emmet

Install the Plugin: Emmet is available as a plugin for many popular text editors such as Visual Studio Code, Sublime Text, Atom, and more. Install the plugin through your editor's package manager or extensions gallery.

Person pondering Emmet cheat sheet shorthand for easier coding

Child: >

nav>ul>li

Expands to

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

Sibling: +

section>p+p+p

Expands to

<section>
  <p></p>
  <p></p>
  <p></p>
</section>

Climb Up: ^

section>header>h1^footer

Expands to

<section>
  <header>
    <h1></h1>
  </header>
  <footer></footer>
</section>

Grouping: ()

section>(header>nav>ul>li)+footer>p

Expands to

<section>
  <header>
    <nav>
      <ul>
        <li></li>
      </ul>
    </nav>
  </header>
  <footer>
    <p></p>
  </footer>
</section>

Multiplication: *

ul>li*3

Expands to

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

IDs and Classes: .

ul.menu>li.menu__item+li#id_item+li.menu__item#id_2

Expands to

<ul class="menu">
  <li class="menu__item"></li>
  <li id="id_item"></li>
  <li class="menu__item" id="id_2"></li>
</ul>

Numbering: $

ul>li.item$*3
ul>li.item$$*3
ul>li.item$@-*3
ul>li.item$@3*5

Expands to

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>
<ul>
  <li class="item01"></li>
  <li class="item02"></li>
  <li class="item03"></li>
</ul>
<ul>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>
<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>
<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li>
</ul>

Attributes: []

input[type="text"]
div[data-attr="test"]

Expands to

<input type="text" />
<div data-attr="test"></div>

Text: {}

p{Lorem ipsum}

Expands to

<p>Lorem ipsum</p>

Implicit tags

.default-block
em>.default-inline
ul>.default-list
table>.default-table-row>.default-table-column

Expands to

<div class="default-block"></div>
<em><span class="default-inline"></span></em>
<ul>
  <li class="default-list"></li>
</ul>
<table>
  <tr class="default-table-row">
    <td class="default-table-column"></td>
  </tr>
</table>