Accelerate your HTML and CSS development using EMMET.

EMMET is a plugin for many popular text editors which greatly improves HTML and CSS workflow.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Here is the link wherein you can download this EMMET plugins and installed it on your favorite Text Editor.
https://emmet.io/download/

Now, that you installed it in your Text Editor. Let’s proceed to how to use EMMET.

Emmet uses abbreviations to define the elements that you want to generate. Once you’re done writing an abbreviation, hitting the TAB key will trigger EMMET to parse the line and Generate the requested code.

NOTE: The main ways to activate EMMET(make sure you’re in an HTML / CSS syntax file).

Creating the HTML 5 default structure.

Type “html:5” in your html file then hit TAB.

Output:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

Creating an Child “>” HTML Element

The child operator > is used to nest elements within each other.
header>nav>a

Output:

<header>
  <nav>
    <a href=""></a>
  </nav>
</header>

Creating an Sibling “+” HTML Element.

The sibling operator + is used to create elements at the same level as the previous element in the abbreviation.
header+section+footer

Output:

<header></header>
<section></section>
<footer></footer>

Creating an Climb-Up “^” HTML Element

The climb-up ^operator is used to move up one level in the tree structure. This can come in handy when you’re using the child operator >.
section>ul>li>a^li

Output:

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

Creating an Multiple HTML Element.

The multiplication operator * is used to define how many occurrences of the element should be generated. The operator applies to the last element before the operator (unless you are using grouping.)
ul>li*5

Output:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Creating an Grouping HTML Element.

You can group together section of an abbreviation using parenthesis ( ). Grouping is useful when creating complex abbreviations.
ul>(li>a)*5

Output:

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

Assigning an IDs in HTML Element.

IDs are defined using the familiar number sign # syntax from CSS.
div#content

Output:

<div id="content"></div>

Assigning an Classes in HTML Element.

Classes are defined using dot-syntax “.” . You can string together multiple classes just as you do in CSS.
div.navigation

Output:

<div class="navigation"></div>

Custom Attributes in HTML Element.

a[target=”_blank”]

Output:

<a href="" target="_blank"></a>

Item Numbering in HTML Element.

Emmet also includes a feature that allows you to automatically add numbers to your HTML. This is useful for applications like setting unique classes on list items. Just add a dollar sign $ to your abbreviation where you want the number to appear and Emmet will take care of the rest.
ul>li.item$*3

Output:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

Reverse Numbering in HTML Element.

Using $ alone will cause elements to be numbered in ascending order. There may however be occasions when you wish to reverse this ordering. This can be done by adding the @- syntax after the dollar sign $.
ul>li.item$@-*3

Output:

<ul>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

Placing Text in HTML Element.

You can set the text that should be contained within an element by placing it in curly braces { }.
p{Hello World!}

Output:

<p>Hello World!</p>

Assigning an Padding and Margin in your CSS Style.

You can type the first letter of the style that you want to used. Padding and Margin has a four side which is rotate as clockwise, it means TOP – LEFT – BOTTOM – RIGHT.

header {
  pt:20
  pl:20
  pb:20
  pr:20

  mt:20
  ml:20
  mb:20
  mr:20
}

Output: Pixels (px) is the default value.

header {
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  padding-right: 20px;

  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  margin-right: 20px;
}

Assigning an font-family, font-size, font-weight in your CSS Style.

Font Family:

ff:s
ff:ss
ff:c
ff:f
ff:m
ff:a
ff:t
ff:v

Font Size:

fz:16
fz:1em
fz:1rem

Font Weight:

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

Output:

Font Family:

font-family: serif;
font-family: sans-serif;
font-family: cursive;
font-family: fantasy;
font-family: monospace;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
font-family: Verdana, Geneva, sans-serif;

Font Size:

font-size: 16px;
font-size: 1em;
font-size: 1rem;

Font Weight:

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

Conclusion:

We’ve been using EMMET for our Frontend Development. And so far, we found it really useful. Especially when we need to quickly generate a list of table.

If you want to learn the other syntax. EMMET has a cheatsheet of it. So check it out https://docs.emmet.io/cheat-sheet/.


Also check-out the following blogs.
Top 5 Atom Editor Packages that can help you to speed up your development.
10 GIT Commands that must know when learning the GIT
The 80/20 Rule to Increase your Productivity.

Share this: