[1] Emmet — the essential toolkit for web-developers ( 版) http://emmet.io/

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow:

[2] Abbreviations ( 版) http://docs.emmet.io/abbreviations/

Abbreviations are the heart of the Emmet toolkit: these special expressions are parsed in runtime and transformed into structured code block, HTML for example. The abbreviation’s syntax looks like CSS selectors with a few extensions specific to code generation. So every web-developer already knows how to use it.

Here’s an example: this abbreviation

#page>div.logo+ul#navigation>li*5>a{Item $}

...can be transformed into

<div id="page">

<div class="logo"></div>

<ul id="navigation">

<li><a href="">Item 1</a></li>

<li><a href="">Item 2</a></li>

<li><a href="">Item 3</a></li>

<li><a href="">Item 4</a></li>

<li><a href="">Item 5</a></li>

</ul>

</div>

[3] Emmet — the essential toolkit for web-developers ( ()) http://emmet.io/

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow:

[4] Abbreviations ( ()) http://docs.emmet.io/abbreviations/

[5] 省略構文と呼ばれているものは Selectors と似ているが、同じではなく互換性はない。