Emmet is a markup language for expanding CSS rules into HTML

### 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>

0 Comments for this cheatsheet. Write yours!