What is Emmet?

Bharat KumarBharat Kumar
1 min read

Emmet is a web development toolkit that enables developers to write HTML and CSS code more quickly and efficiently.
- It allows you to type shortcuts that are then expanded into full pieces of code for writing HTML and CSS, based on an abbreviation structure most developers already use that expands into full-fledged HTML markup and CSS rules.
- It was originally a plugin for various text editors, such as Sublime Text, Visual Studio Code, and Atom, but it has become a widely adopted set of tools integrated into many modern code editors.

Example:

Input:

ul>.my-class

Output:

<ul>
 <li class="my-class"></li>
</ul>

Input:

ul>li*3>a

Output:

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

This expands into an unordered list(ul) with three list items(li), each containing an anchor(a) element.

0
Subscribe to my newsletter

Read articles from Bharat Kumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Bharat Kumar
Bharat Kumar

I am a frontend developer.