
Type ! or html:5, and press Ctrl + Alt + Enter. Or you can use the quick keyboard shortcut like Ctrl + Alt + Enter. Type in Emmet’s very simple syntax, and go to Plugins menu, Emmet, and choose Expand or other command. Check Emmet from the list, and click Install. Open Notepad++, go to Plugins, and Plugin Manager.

Since I am using Notepad++ as my main editor, I am going to show these examples using Notepad++. Well, what does exactly mean to a web developer? And why it’s so good? Let me show you a few examples. But Emmet takes this snippet 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.

It’s basically an essential toolkit for web developers who are, well, not using tools like Visual Studio.Īs a coder in general, we all know what a snippet is and we all have a chunk of them stored to boost our coding productivity.

Emmet, formerly called Zen Coding, is a plugin tool for most of the popular text editors that greatly improves HTML & CSS coding efficiency and accuracy.
