Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow by using abbreviations. Abbreviations are the heart of this tool, these special expressions are parsed in runtime and transformed into structured code block increasing productivity by helping you save coding time. It’s available for most text editors and IDEs, therefore wildly use.
The idea of this post is to give you a headstart with emmet and go over some basic but very important abbreviation.
Emmet provides a very easy way to write the basic structure of your HTML documents by using the
! abbreviation. What could be more exciting than that?
Emmet also provides an abbreviation for creating elements in many ways.
Single Element with a class
Single Element with an Id
Single Element with attribute
Emmet abbreviation also includes creating elements with their children.
Emmet also allows multiplication using
* keyword, very useful when creating a list.
Emmet also provides a way to create sibling elements using the
Emmet allows grouping, in order to use the multiplication technique in several elements.
After creating nested elements you might want to climb back up in the hierarchy of your document, Emmet allows you to do that by using
You can insert text in your abbreviations by using
Emmet also facilitates the CSS work.