Emmet for HTML

Emmet is a web development tool that helps streamline and speed up the process of writing HTML and CSS code.


Nesting Child >

Use > operator to nest elements inside each other

  • Syntax : Write the below syntax and press tab

div>ul>li

  • HTML Output

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


Sibling +

Use + operator to place elements near each other, on the same level.

  • Syntax : Write the below syntax and press tab

div+p+h1

  • HTML Output

<div></div>
<p></p>
<h1></h1>


Climb-up ^

With > operator you’re descending down the generated tree and positions of all sibling elements will be resolved against the most deepest element

  • Syntax : Write the below syntax and press tab

div+div>p>span+em^h1

  • HTML Output

<div></div>
<div>
    <p>
        <span></span>
        <em></em>
    </p>
    <h1></h1>
</div>


Multiplication *

With * operator you can define how many times element should be outputted

  • Syntax : Write the below syntax and press tab

ul>li*5

  • HTML Output

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


Item numbering $

With multiplication * operator you can repeat elements, but with $ you can number them.

  • Syntax : Write the below syntax and press tab

ul>li.item-$*5

  • HTML Output

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
    <li class="item-4"></li>
    <li class="item-5"></li>
</ul>


Change Numbering & Order @

  • @- : @ with - sign for generate item order descending

  • @N : @ with number change counter base value. ul>li.item-$@5*5

  • Syntax : Write the below syntax and press tab

ul>li.item-$@-*5

  • HTML Output

<ul>
    <li class="item-5"></li>
    <li class="item-4"></li>
    <li class="item-3"></li>
    <li class="item-2"></li>
    <li class="item-1"></li>
</ul>


Grouping ()

Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations

  • Syntax : Write the below syntax and press tab

div>(header>p)+footer>p

  • HTML Output

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


Class Attribute Operator .

In CSS, you use elem.class notation to reach the elements with specified class attributes.

  • Syntax : Write the below syntax and press tab

div.wrapper

  • HTML Output

<div class="wrapper"></div>


ID Attribute Operator #

In CSS, you use elem#id notation to reach the elements with specified id attributes.

  • Syntax : Write the below syntax and press tab

div#main-body

  • HTML Output

<div id="main-body"></div>


Custom attributes []

You can use [attr] notation (as in CSS) to add custom attributes to your element

  • Syntax : Write the below syntax and press tab

td[title="Bismillah" colspan=3]

  • HTML Output

<td title="Bismillah" colspan="3"></td>


Text {}

Can use curly braces to add text to element

  • Syntax : Write the below syntax and press tab

a{HMTMCSE}

  • HTML Output

<a href="">HMTMCSE</a>
Share