Emmet — the essential toolkit for web-developers

Emmet 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>

“Expand Abbreviation” (Tab key)
“Next Edit Point” (Ctrl+Alt+→)
“Previous Edit Point” (Ctrl+Alt+←)
“Balance” (Ctrl+D)
“Select Next Item” (Shift+Ctrl+.)
“Select Previous Item” (Shift+Ctrl+,)
“Toggle Comment” (Ctrl+/)

▶ Watch demo

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