How to make the same snippet for sublime text 2 or vim?

Question

vim

I use Emmet, and I saw Yuri Artyukh on the FrontendDevConf channel telling How to type up websites faster than they are drawn . How to make the same snippet?
I want to write this:
div.bla[Tab]
And to receive this:

<!-- begin bla -->
<div class="bla">
  
</div>
<!-- end bla -->

Answer 1

<snippet>
  <content><![CDATA[
<!-- begin $1  -->
<div class="$1">
  $2
</div>
<!-- end $1 -->
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>di</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>text.html</scope>
</snippet>