emmet, formerly known as zen coding, is one of the best tools you should have to increase your productivity while coding html or css. it works just like code completion, but it's more powerful and awesome. it can automate your html/css from a simple form to the complex one.

emmet offers good support for text editors or ide (integrated development environment) such as dreamweaver, eclipse, sublime text, textmate, expresso, coda, parentheses, notepad++, phpstorm and many more. it also supports online editing tools like jsfiddle, jsbin, codepen, icecoder and codio.

the way emmet works is by typing your tab keyboard key when you are done typing syntax. the following are the most common emmet symbols that you can use. Keep reading to see them in action.

you will be amazed when you write html with emmet like i did. as mentioned earlier, emmet can shorten a simple html to very complex. and they are only written on a single line of code. by default, if you abbreviate unknown tag name, emmet will automatically type the tag you type. see below animation to understand it easily.