from zen coding to Emmet

History

Zen coding a speedy way of writing HTML codes using CSS-like selector like syntax. It’s originally proposed by Vadim Makeev, 2008, being famous after matured by Sergey Chikuyonok, 2009. It then evolved into Emmet, 2013.

A simple example

The following code:

div#content>h1+p

generates:

<div id="content">
<h1></h1>
<p></p>
</div>

Basic usage

• document
  
  • html:5 or !
• easy add
  
  • class, .
  • id, #
  • text, {}
  • attribute, []
• nesting
  
  • child, >
  • sibling, +
  • upper level, ^
• grouping, ()
• implicit tag names[1]
  
  • default, div
  • li for ul and ol
  • tr for table, tbody, thead and tfoot
  • td for tr
  • option for select and optgroup
• multiplication, *
• numbering, $
• lorem or lipsum
  
  • loremN will generate N random words.

1. Emmet is intelligent to guess the tag name omited. For example, .item in <ul> will generate <li class="item"></li>. ↩