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

HTML Structure

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?

Elements Tag

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

Children

Emmet abbreviation also includes creating elements with their children.

Multiplication

Emmet also allows multiplication using * keyword, very useful when creating a list.

Siblings

Emmet also provides a way to create sibling elements using the + keyword.

Grouping

Emmet allows grouping, in order to use the multiplication technique in several elements.

Climbing Up

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.

Text

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

CSS

Emmet also facilitates the CSS work.

Flatiron School Software Engineering Student

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store