左：Emmet コマンド 中：展開結果 右：意味
| コマンド | 展開結果 | 意味 |
|---|---|---|
p.text | <p class="text"></p> | <p>タグに class="text" をつける |
ul#list | <ul id="list"></ul> | <ul>タグに id="list" をつける |
p#id.text | <p id="id" class="text"></p> | <p>タグに id と class を同時につける |
#box | <div id="box"></div> | <div>タグで id="box" |
.wrapper | <div class="wrapper"></div> | <div>タグで class="wrapper" |
.header>h1 | <div class="header"><h1></h1></div> | div.header の中に h1 を入れる |
h2+p | <h2></h2><p></p> | h2 と p を兄弟要素で並べる |
.main>h2+p | <div class="main"><h2></h2><p></p></div> | div.main の中に h2 と p を入れる |
(.header>h1)+(.main>h2)+(.footer>p) | <div class="header"><h1></h1></div> | header / main / footer の3ブロックを並べる |
a | <a href=""></a> | 空のリンクタグを作る |
img | <img src="" alt=""> | 画像タグ（src, alt が自動でつく） |
ol[order="3"] | <ol order="3"></ol> | <ol>に任意の属性をつける例 |
p{text} | <p>text</p> | <p>タグの中に文字「text」を入れる |
ul>li*10 | <ul><li></li>...（10個）...</ul> | <ul>の中に <li> を10個つくる |
ul>li*3>a | <ul><li><a href=""></a></li>...（3個）...</ul> | <ul>の中に <li>、その中に <a> を入れる |
ul>li{link$}*3 | <ul><li>link1</li><li>link2</li><li>link3</li></ul> | $ で連番が入り、link1～3 になる |
ul>li*10>a[href="link$$.html"]{link$$} | <ul> | 連番でリンク作成（01～10 のファイル名とテキスト） |