Making HTML and CSS code easy

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 Abbreviations

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

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 + keyword.

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 ^ keyword.


You can insert text in your abbreviations by using {}.

Emmet also facilitates the CSS work.

Flatiron School Software Engineering Student