All About Emmet

Nagananda unNagananda un
3 min read

Table of contents

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow. 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.

  • HTML 5 Boilerplate

Syntax

! < tab >

Output

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title>Document</title>
 </head>
 <body>

 </body>
 </html>

  • HTML tags

Emmet doesn’t have a predefined set of available tag names, you can write any word and transform it into a tag: div -> <div></div> foo <foo></foo> and so on.

Syntax

tagname < tab >

Output

<body></body>

  • Child: >

You can use > operator to nest elements inside each other:

nav>ul>li < tab >

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

  • Sibling: +

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

div+p+bq < tab >

 <div></div>
 <p></p>
 <blockquote></blockquote>

  • 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:

div+div>p>span+em^bq

 <div></div>
 <div>
 <p><span></span><em></em></p>
 <blockquote></blockquote>
 </div>

div+div>p>span+em^^bq

 <div></div>
 <div>
 <p><span></span><em></em></p>
 </div>
 <blockquote></blockquote>

  • Multiplication: *

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

ul>li*5

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

  • Grouping: ()

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

div>(header>ul>li*2>a)+footer>p
 <div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
 </div>

  • ID and CLASS

In CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes. In Emmet, you can use the very same syntax to add these attributes to specified element

div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

  • Item numbering: $

With multiplication * operator you can repeat elements, but with $ you can number them. Place $ operator inside element’s name, attribute’s name or attribute’s value to output current number of repeated element:

ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

With @ modifier, you can change numbering direction (ascending or descending) and base (e.g. start value). For example, to change direction, add @- after $

ul>li.item$@-*5
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

  • Text: {}

You can use curly braces to add text to element:

a{Click me}

<a href="">Click me</a>

  • Lorem Ipsum generator

“Lorem ipsum” dummy text is used by many web-developers to test how their HTML templates will look with real data.

p>lorem10<!-- 10 words -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, deleniti.</p>

  • Implicit tag names

Some tags can be implicitly written using emmet abbrivation

.class
     <div class="class"></div>

em>.class
     <em><span class="class"></span></
em>

ul>.class
     <ul>
        <li class="class"></li>
    </ul>

table>.row>.col
    <table>
        <tr class="row">
            <td class="col"></td>
        </tr>
    </table>

More about emmet

0
Subscribe to my newsletter

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

iwritecode#emmet #html #htmlelemnts #boilerplate

Written by

Nagananda un
Nagananda un