Quick Start for Emmet/Zen Coding

Quick Reference

The following are supported features:

Ele	Creates an HTML element tag Expand an HTML element tag
#	Creates an id attribute Expands an id attribute for element tags.
.	Creates a class attribute Acts on the element tag and expands a class attribute. A tag can be associated with multiple class attributes and is added to the class attribute together.
[]	Creates a custom attribute It acts on the element tag and expands the attribute of an HTML element tag. It can be any non-standard attribute name in the same way as the CSS selector.
>	Creates a child element Apply to element tags or groups, and expand a child element tag or group immediately. For details, refer to CSS selector.
+	Creates a sibling element Act on element tags or groups, and immediately expand a sibling element tag or group. Refer to CSS Selector
^	Climbs up Applies to element tags or groups, followed by element tags or groups climbed to the previous level
*	Is element multiplication. This creates the same thing n number of times Act on element tags or groups, expand the number of repetitions, followed by a number.
$	Is replaced with an incremental number Used Together with *, representing the Copy Sequence Number
$	Is used for numbers with padding Number placeholder, filled with 0
{}	Creates text in an element Expand as text
()	As a group Label groups can be nested.

ID and class attributes: # and.

<!-- Type this -->div#contentRegion.address<!-- Creates this --><div id="contentRegion" class="address"></div>

Custom Attributes: []

<!-- Type this -->div[title]<!-- Creates this --><div title=""></div>

Attribute values can also be included.

<!-- Type this -->input[placeholder="Name" type="text"]<!-- Creates this --><input type="text" value="" placeholder="Name" />

Sub-Group:>

<!-- Type this -->div#menu>span.item[title]<!-- Creates this --><div id="menu">    <span class="item" title=""></span></div>

Sibling group: +

<!-- Type this -->footer>div>a+input<!-- Creates this --><footer>    <div>        <a href=""></a>        <input type value="" />    </div></footer>

Climb: ^

<!-- Type this -->footer>div>a+input^p<!-- Creates this --><footer>    <div>        <a href=""></a>        <input type value="" />    </div>    <p></p></footer>

Repeated times :*

<!-- Type this -->ul>li*4>span<!-- Creates this --><ul>    <li><span></span></li>    <li><span></span></li>    <li><span></span></li>    <li><span></span></li></ul>

Repeated serial number: $

<!-- Type this -->section>article.item$$*4<!-- Creates this --><section>    <article class="item01"></article>    <article class="item02"></article>    <article class="item03"></article>    <article class="item04"></article></section>

Text :{}

<!-- Type this -->ul>li*4>span{Caption $$}<!-- Creates this --><ul>    <li><span>Caption 01</span></li>    <li><span>Caption 02</span></li>    <li><span>Caption 03</span></li>    <li><span>Caption 04</span></li></ul>

GROUP :()

<!-- Type this -->((a+span)+(a>span))*3<!-- Creates this --><a href=""></a><span></span><span><a href=""></a></span><a href=""></a><span></span><span><a href=""></a></span><a href=""></a><span></span><span><a href=""></a></span>