http://emmet.io

emmet-examples.html

<h1>Using <a href="http://emmet.io">Emmet</a></h1>

<!-- .template>h1.title+.body>p*3 -->
<div class="template">
  <h1 class="title"></h1>
  <div class="body">
    <p></p>
    <p></p>
    <p></p>
  </div>
</div>

<!-- div[role="main"]#main.class1.class2 -->
<div role="main" id="main" class="class1 class2"></div>

<!-- a[href="http://www.google.com"][title="Google"].button -->
<a href="http://www.google.com" title="Google" class="button"></a>

<!-- ul.nav>li*3>a[href="http://www.google.com"][title="Google"].button -->
<ul class="nav">
  <li><a href="http://www.google.com" title="Google" class="button"></a></li>
  <li><a href="http://www.google.com" title="Google" class="button"></a></li>
  <li><a href="http://www.google.com" title="Google" class="button"></a></li>
</ul>

<!-- ul>li.item$*3 -->
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

<!-- p{hi}>a[href="#"]{This is the Link} -->
<p>hi<a href="#">This is the Link</a></p>
<!-- p{hi}>a[href="#"]{This is the Link} -->
<p>hi<a href="#">This is the Link</a></p>

<!-- section.blog-list>article.blog-post*3>h1.title{Post Title $}+.body>p{Body Text $ Here}*2 -->
<section class="blog-list">
  <article class="blog-post">
    <h1 class="title">Post Title 1</h1>
    <div class="body">
      <p>Body Text 1 Here</p>
      <p>Body Text 2 Here</p>
    </div>
  </article>
  <article class="blog-post">
    <h1 class="title">Post Title 2</h1>
    <div class="body">
      <p>Body Text 1 Here</p>
      <p>Body Text 2 Here</p>
    </div>
  </article>
  <article class="blog-post">
    <h1 class="title">Post Title 3</h1>
    <div class="body">
      <p>Body Text 1 Here</p>
      <p>Body Text 2 Here</p>
    </div>
  </article>
</section>