Emmet ou Zen Coding

Liens

http://emmet.io/
Résumé de Emmet

Propriétés à saisir

E
Nom de l'élément (div, p,a);
E#id
Elément avec id (div#content, p#intro, span#error);
E.class
Elément avec classes (div.header, p.error.critial). On peut aussi combiner les classes et les IDs : div#content.column.width;
E>N
Elément enfant (div>p, div#footer>p>span);
E+N
Eléments frères (h1+p, div#header+div#content+div#footer);
E*N
Multiplication d'éléments (ul#nav>li*5>a);
E$*N
Item horodatés (ul#nav>li.item-$*5);
E{N}
Données associées (h2{mon Titre});

Exemple Simple

div#content>p.intro+ul>li*3>a

<div id="content">
    <p class="intro"></p>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

Exemple plus Complet

 div#container>(div.main_content>div.article*4>
                    (a.cat)
                    (div.article_body>(h2)(a.photo>img)(p.the_excerpt)(a.more_link))
                    (ul.tags>li*3>a))
                (div.aside>div.aside_block*3>h3)

        <div id="container">
            <div class="main_content">
                <div class="article">
                    <a href="" class="cat"></a>
                    <div class="article_body">
                        <h2></h2>
                        <a href="" class="photo"><img src="" alt="" /></a>
                        <p class="the_excerpt"></p>
                        <a href="" class="more_link"></a>
                    </div>
                    <ul class="tags">
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
                <div class="article">
                    <a href="" class="cat"></a>
                    <div class="article_body">
                        <h2></h2>
                        <a href="" class="photo"><img src="" alt="" /></a>
                        <p class="the_excerpt"></p>
                        <a href="" class="more_link"></a>
                    </div>
                    <ul class="tags">
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
                <div class="article">
                    <a href="" class="cat"></a>
                    <div class="article_body">
                        <h2></h2>
                        <a href="" class="photo"><img src="" alt="" /></a>
                        <p class="the_excerpt"></p>
                        <a href="" class="more_link"></a>
                    </div>
                    <ul class="tags">
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
                <div class="article">
                    <a href="" class="cat"></a>
                    <div class="article_body">
                        <h2></h2>
                        <a href="" class="photo"><img src="" alt="" /></a>
                        <p class="the_excerpt"></p>
                        <a href="" class="more_link"></a>
                    </div>
                    <ul class="tags">
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="aside">
                <div class="aside_block">
                    <h3></h3>
                </div>
                <div class="aside_block">
                    <h3></h3>
                </div>
                <div class="aside_block">
                    <h3></h3>
                </div>
            </div>
        </div>

Que donne ?

html>head+body>h1+h2

html:5

a[href=#]

ul>li.item$*3