Vous pouvez utiliser un >opérateur pour imbriquer des éléments les uns dans les autres:

div>ul>li
                                            

...produira

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

Utilisez l' +opérateur pour placer les éléments les uns à côté des autres, au même niveau:

div+p+bq
                                            

...produira

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

Avec l' >opérateur, vous descendez dans l'arborescence générée et les positions de tous les éléments frères seront résolues par rapport à l'élément le plus profond:

div+div>p>span+em 
                                            

...produira

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

Avec l' ^opérateur, vous pouvez monter d'un niveau dans l'arborescence et modifier le contexte où les éléments suivants doivent apparaître:

div+div>p>span+em 
                                            

...produira

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

Vous pouvez utiliser autant d' ^opérateurs que vous le souhaitez, chaque opérateur montera d'un niveau:

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

...produira

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

Avec l' *opérateur, vous pouvez définir combien de fois l'élément doit être sorti:

ul>li*5
                                            

...produira

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

Les parenthèses sont utilisées par les utilisateurs expérimentés d'Emmets pour regrouper les sous-arbres dans des abréviations complexes:

div>(header>ul>li*2>a)+footer>p
                                            

...produira

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
                                            

En CSS, vous utilisez elem#idet la elem.classnotation pour atteindre les éléments avec des attributs spécifiés idou class. Dans Emmet, vous pouvez utiliser la même syntaxe pour ajouter ces attributs à l'élément spécifié:

div#header+div.page+div#footer.class1.class2.class3
                                            

...produira

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
                                            

Avec l' *opérateur de multiplication , vous pouvez répéter des éléments, mais avec $vous pouvez les numéroter . Placez l' $opérateur à l'intérieur du nom de l'élément, du nom de l'attribut ou de la valeur de l'attribut pour afficher le numéro actuel de l'élément répété:

ul>li.item$*5
                                            

...produira

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

Vous pouvez utiliser plusieurs $à la suite pour compléter le numéro avec des zéros:

ul>li.item$$$*5
                                            

...produira

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

Vous pouvez utiliser des accolades pour ajouter du texte à l'élément:

a{Click me}
                                            

...produira

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

Notez que {text}est utilisé et analysé comme un élément séparé (comme, div, petc.) , mais a une signification particulière lorsqu'il est écrit juste après élément. Par exemple, a{click}et a>{click}produira le même résultat, mais a{click}+b{here}et a>{click}+b{here}ne le fera pas:

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
                                            

Dans le deuxième exemple, l' <b> élément est placé à l' intérieur de l' <a> élément. Et c'est la différence: quand {text}est écrit juste après l'élément, cela ne change pas le contexte parent. Voici un exemple plus complexe montrant pourquoi c'est important:

p>{Click }+a{here}+{ to continue}
                                            

...produira

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