If you go by their site the definition is

“Emmet is a plug in for many popular text editors which greatly improves HTML & CSS workflow:”

The general way to write Emmet abbreviation is:

tagName[series of expressions]

Where tagName: is the HTML tag you want to generate

Series of expressions will govern the markup that will be generated.

Generating HTML Skeleton

The first thing you would do when creating a HTML page is create the skeleton for it, that is type DOCTYPE, html,head, body tags.

Just type ‘!` in the editor, it will show a pop up with the content that will be generated, press enter and there you have your HTML skeleton - boilerplate code.

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

</body>
</html>

2. Elements with text content inside them

If you want to generate a div with text content inside them

div{This is a div}

Will generate a div tag with whatever text that is specified inside the curly braces ({})

<div>This is a div</div>

3. Nested elements

To generate nested we will use ‘>’ operator

ul>li

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

Let’s make things a bit interesting,

Generate a list 3 li’s , each li has an anchor(a) tag:

For nesting we can use ‘>’ operator. But how would we go about for repetition ? Repetition can be done using operator li3 will give three li’s just like normal multiplication.

ul>li*3>a

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

If you wanted numbers inside your li’s you could use $ operator

ul>li{$}*3

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

You can also use $ multiple times so the number is padded with 0. You can set base number with ‘@N’ and direction with ‘@-’

ul>li{$@-}*5

<ul>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
</ul>

ul>li{$@10}*5

<ul>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
</ul>

You can even use them together

ul>li{$@-10}*5

<ul>
    <li>14</li>
    <li>13</li>
    <li>12</li>
    <li>11</li>
    <li>10</li>
</ul>

4. What about classes and Id

div#main.container.responsive

you can specify Id by using ‘#’ and classes by using ‘.’

 <div id="main" class="container responsive"></div>

You can specify multiple classes but do remember that you can have only one id. If you specify two id’s using #, the 2nd id will override the first.

So:

div#main#main-body.container.responsive

will be expanded to

<div id="main-body" class="container responsive"></div>

5. Custom attributes

If you want a div with custom data property you would do the following:

div[data-name=logo]

<div data-name="logo"></div>

6. Generating Siblings.

Let’s say you want to have a header tag, div tag, footer tag. What would you do?

These are not nested so you cant use ‘>’

To generate sibling use ‘+’ operator

header+div+footer

<header></header>
<div></div>
<footer></footer>

7. Grouping

You can use ‘()’ operator to group complex abbreviations.

div>(a>p>span+span)*3

This will expand to

<div>
    <a href="">
        <p><span></span><span></span></p>
    </a>
    <a href="">
        <p><span></span><span></span></p>
    </a>
    <a href="">
        <p><span></span><span></span></p>
    </a>
</div>

CSS

You can also use Emmet for CSS. Let’s look at some examples.

Margin of 10 on all sides

m10–10–10–10

This will be expanded to:

margin: 10px 10px 10px 10px;

same thing can be done for padding :

p10–10–10–10

which will be expanded to:

padding: 10px 10px 10px 10px;

Refer https://docs.emmet.io/cheat-sheet/ for more info

Divyanshi

Divyanshi

What is Emmet?

CSS