Emmet is a plugin for many popular text editors which greatly improves 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 wait: 600 run: emmet.expand_abbreviation wait: 1000 tooltip: Traverse between important code points with “Next/Previous Edit Point” action wait: 1000 run: {command: 'emmet.next_edit_point', times: 7} wait: 1000 tooltip: Select tags with “Match Tag Pair” action run: {command: 'emmet.match_pair_outward', times: 3} wait: 1000 moveTo: 102 tooltip: Select important parts with “Select Next/Previous Item” action 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 run: {command: 'emmet.toggle_comment', times: 2, beforeDelay: 1000}

HTML from CSS You’ve already known how to use Emmet abbreviations: its syntax is inspired by CSS selectors.

Dynamic snippets Each abbreviation is transformed in runtime: just slightly change its name to get a different result.

Customizable Users can easily add new snippets and fine-tune Emmet experience with just a few JSON files.

Platform for new tools Dig into Emmet source code and re-use its modules to create your very own and unique actions.