Emmet Cheatsheet

Syntax

Child: >

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

Sibling: +

                                
                                    div>p>bq
OUTPUT
                                    
                                        <div></div>
                                        <p></p>
                                        <blockquote></blockquote>

Climb-up: ^

                                
                                    div+div>p>span+em^bq
OUTPUT
                                    
                                        <div></div>
                                        <div>
                                            <p>
                                                <span></span>
                                                <em></em>
                                            </p>
                                            <blockquote></blockquote>
                                        </div>
                                    
                                
                                
                                    div+div>p>span+em^^bq
OUTPUT
                                    
                                        <div></div>
                                        <div>
                                            <p>
                                                <span></span>
                                                <em></em>
                                            </p>
                                        </div>
                                        <blockquote></blockquote>

Item numbering: $

                                
                                    ul>li.item$*5
OUTPUT
                                    
                                        <ul>
                                            <li class="item1"></li>
                                            <li class="item2"></li>
                                            <li class="item3"></li>
                                            <li class="item4"></li>
                                            <li class="item5"></li>
                                        </ul>
                                    
                                
                                
                                    h$[title=item$]{Header $}*3
OUTPUT
                                    
                                        <h1 title="item1">Header 1</h1>
                                        <h2 title="item2">Header 2</h2>
                                        <h3 title="item3">Header 3</h3>
                                    
                                
                                
                                    ul>li.item$$$*5
OUTPUT
                                    
                                        <ul>
                                            <li class="item001"></li>
                                            <li class="item002"></li>
                                            <li class="item003"></li>
                                            <li class="item004"></li>
                                            <li class="item005"></li>
                                        </ul>
                                    
                                
                                
                                    ul>li.item$@-*5
OUTPUT
                                    
                                        <ul>
                                            <li class="item5"></li>
                                            <li class="item4"></li>
                                            <li class="item3"></li>
                                            <li class="item2"></li>
                                            <li class="item1"></li>
                                        </ul>
                                    
                                
                                
                                    ul>li.item$@3*5
OUTPUT
                                    
                                        <ul>
                                            <li class="item3"></li>
                                            <li class="item4"></li>
                                            <li class="item5"></li>
                                            <li class="item6"></li>
                                            <li class="item7"></li>
                                        </ul>

Implicit tag names

                                
                                    .class
OUTPUT
                                    
                                        <div class="class"></div>
                                    
                                
                                
                                    em>.class
OUTPUT
                                    
                                        <em><span class="class"></span></em>
                                    
                                
                                
                                    ul>.class
OUTPUT
                                    
                                        <ul>
                                            <li class="class"></li>
                                        </ul>
                                    
                                
                                
                                    table>.row>.col
OUTPUT
                                    
                                        <table>
                                            <tr class="row">
                                                <td class="col"></td>
                                            </tr>
                                        </table>

ID and CLASS attributes

                                
                                    #header
OUTPUT
                                    
                                        <div id="header"></div>
                                    
                                
                                
                                    div#header
OUTPUT
                                    
                                        <div id="header"></div>
                                    
                                
                                
                                    .title
OUTPUT
                                    
                                        <div class="title"></div>
                                    
                                
                                
                                    div.title
OUTPUT
                                    
                                        <div class="title"></div>
                                    
                                
                                
                                    form#search.wide
OUTPUT
                                    
                                        <form id="search" class="wide"></form>
                                    
                                
                                
                                    p.class1.class2.class3
OUTPUT
                                    
                                        <p class="class1 class2 class3"></p>

Multiplication: *

                                
                                    ul>li*5
OUTPUT
                                    
                                        <ul>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>

Grouping: ()

                                
                                    div>(header>ul>li*2>a)+footer>p
OUTPUT
                                    
                                        <div>
                                            <header>
                                                <ul>
                                                    <li><a href=""></a></li>
                                                    <li><a href=""></a></li>
                                                </ul>
                                            </header>
                                            <footer>
                                                <p></p>
                                            </footer>
                                        </div>
                                    
                                
                                
                                    (div>dl>(dt+dd)*3)+footer>p
OUTPUT
                                    
                                        <div>
                                            <dl>
                                                <dt></dt>
                                                <dd></dd>
                                                <dt></dt>
                                                <dd></dd>
                                                <dt></dt>
                                                <dd></dd>
                                            </dl>
                                        </div>
                                        <footer>
                                            <p></p>
                                        </footer>

Custom attributes

                                
                                    p[title="Hello world"]
OUTPUT
                                    
                                        <p title="Hello world"></p>
                                    
                                
                                
                                    td[rowspan=2 colspan=3 title]
OUTPUT
                                    
                                        <td rowspan="2" colspan="3" title=""></td>
                                    
                                
                                
                                    [a='value1' b="value2"]
OUTPUT
                                    
                                        <div a="value1" b="value2"></div>

Text: {}

                                
                                    a{Click me}
OUTPUT
                                    
                                        <a href="">Click me</a>
                                    
                                
                                
                                    p>{Click }+a{here}+{ to continue}
OUTPUT
                                    
                                        <p>Click <a href="">here</a> to continue</p>