Emmet БЂ” the essential toolkit for web-developers

Emmet (previously known as Zen Coding) is a web-developerБЂ™s toolkit that can greatly improve your HTML & CSS workflow:

<!doctype html>
<html lang="en">
<head>
    <title>Demo</title>
</head>
<body>
    |
</body>
</html>
~~~
tooltip: Type CSS-like abbreviation
type: ul#nav>li.item$*4>a{Item $}
wait: 1000
tooltip: Run БЂњExpand AbbreviationБЂ« action to expand it into HTML ::: БЂњExpand AbbreviationБЂ« (Tab key)
wait: 600
run: emmet.expand_abbreviation
wait: 1000
tooltip: Traverse between important code points with БЂњNext/Previous Edit PointБЂ« action ::: БЂњNext Edit PointБЂ« (Ctrl-Alt-Б†’) <br> БЂњPrevious Edit PointБЂ« (Ctrl-Alt-Б†ђ)
wait: 1000
run: {command: 'emmet.next_edit_point', times: 7}
wait: 1000
tooltip: Select tags with БЂњMatch Tag PairБЂ« action ::: БЂњMatch PairБЂ« (Cmd-D)
run: {command: 'emmet.match_pair_outward', times: 3}
wait: 1000
moveTo: 102
tooltip: Select important parts with БЂњSelect Next/Previous ItemБЂ« action ::: БЂњSelect Next ItemБЂ« (Shift-Cmd-.) <br> БЂњSelect Previous ItemБЂ« (Shift-Cmd-,)
run: {command: 'emmet.select_next_item', times: 7, beforeDelay: 300}
wait: 2000
moveTo: 95
wait: 1000
tooltip: Quickly comment full tag with БЂњToggle CommentБЂ« action ::: БЂњToggle CommentБЂ« (Cmd-/)
run: {command: 'emmet.toggle_comment', times: 2, beforeDelay: 1000}

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called БЂњsnippetsБЂ«. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you canБЂ™t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Start learning Emmet with the abbreviation syntax and available actions.

Download plugin for your favourite editor