Simple overview of Emmet technology

1. Emmet(Zen Coding)
Overview

2. What is Emmet?

3. “Emmet (previously known as Zen Coding)
is a web-developer’s toolkit that can
greatly improve your HTML & CSS
workflow:”
Emmet web site

4. How to Install it?

5. You should have one of those IDE

6. Download Emmet plugin:
Go to http://docs.emmet.io/ and chose your
favorite IDE from the list.
Follow the instruction and install the plugin
Some editors support package control and
console line plugin installation

7. Syntax

8. Expand single element (element name)
You type: You get:
div <div></div>
p <p></p>
img <img src="" alt="">

9. Expand multiple elements (*n)
You get:
You type:
<div></div>
div*2 <div></div>
<p></p>
<p></p>
p*3 <p></p>
<p></p>
img*2 <img src="" alt="">
<img src="" alt="">

10. Add Custom text in elements({})
You type: You get:
p{Lorem ipsum} <p>
Lorem ipsum
</p>
a{Click me}
<a href=“”>Click me</a>

11. Element nesting (>) child nesting
You type: You get:
ul>li <ul>
<li></li>
</ul>
<div>
div>p <p></p>
</div>

12. Element nesting (+) siblings nesting
You type: You get:
Same Level as second div
<div></div>
<div>
div+div>p+span <p></p>
<span></span>
</div>
Same Level as the p element

13. Element nesting (^) climb up
You type: You get:
Level 2 nesting Back to Level 1
<div>
<p>
div>p>span^span <span></span>
</p>
<span></span>
</div>

14. Element nesting (^) climb up
You type: You get:
Level 2 nesting
<div>
<p>
div>p>span^^span <span></span>
</p>
</div>
Outside of nesting
<span></span>

15. Attributs
Id attribute: <div id=“header”>
div#header </div>
class attribute <div class=“someHeader”>
</div>
div.someHeader
<div name=“theHead”>
custom attribute
</div>
div[name = “theHead”]