Emmet Cheat Sheet

• Adding ID

Using emmet, we can add ID selectors. Write the “#” symbol and then the name of the id to add an id.

#sample_1ge 

The code editor will create a div with the id "sample_1" after you click the tab key.

<div id="sample_1"></div>

For other elements, we can also create an id. For instance, the element name must be written after the “#” symbol followed by the id name in order to construct a <p> with the id "sample_1".

p#sample_1

The code editor will create a p with the id "sample_1" after you click the tab key.

<p id="sample_1"></p>

• Adding CLASS

Using emmet, we can add ID selectors. Write the “.” symbol and then the name of the id to add an id.

.sample_1

The code editor will create a div with the id "sample_1" after you click the tab key.

<div class="sample_1"></div>

For other elements, we can also create an id. For instance, the element name must be written after the “.” symbol and the id name in order to construct a <p> with the id "sample_1".

p.sample_1

The code editor will create a p with the id "sample_1" after you click the tab key.

<p class="sample_1"></p>

• Adding both CLASS and ID

Using emmet, we can build tags that contain both a class and an id. Such tags must be written with the element name, followed by “#” the id name, followed by “.” and the class name.

p#sample_Name.class_Name

The code editor will generate a p with the class "class_Name" and ID "sample_Name" after you click the tab key.

<p id="sample_Name" class="class_Name"></p>

• Adding multiple CLASSES

Using emmet, we are able to generate tags with various classes. This requires writing the element name followed by. This is followed by the names of the classes we want to add.

div.class_1.class_2.class_3

The code editor will construct a div with the classes "class1," "class2," and "class3" when you click the tab key.

<div class="class_1 class_2 class_3"></div>

Using emmet, we may construct a tag with a certain attribute and pass its value. To accomplish this, we must enclose the element name in square brackets “[ ]”. We can include the name(s) of one or more attributes inside the bracket along with the value.

p[title="Custom Title"]

The code editor will create an element with the name "Scaler academy" when you click the tab key.

<p title=" Custom Title"></p>

We can pass an attribute without a parameter and write several attributes. Without an argument, the empty string ("") will be applied to the attribute.

td[rowspan=4 colspan=5 title]

The code editor will create a td with rowspan=4 colspan=4 title=”” when you click the tab key.

<td rowspan="4" colspan="5" title=""></td>

Using emmet, we may also add sentences or paragraphs inside of tags. To do this, we must write the element name inside the curly brackets. The text item can be added within these curly brackets.

a{Click on the link here}

The code editor will generate an a with the word "Click on the link here" when you click the tab key.

<a href="">Click on the link here</a>

Tags can be nested within tags. To accomplish this, we must write the parent tag name followed by the symbol > before the tag that will be nested.

div>p_1

The code editor will produce a div with a p_1 within when the tab key is clicked.

<div>
   <p_1></p_1>
</div>

Additional items can be nested. We must continue adding children in order to do this. 

Kindly Note: that the element to the left of > will act as the parent for the element to the right of >*.

div>ul>li_1

The code editor will produce a nav with a li_1 nested inside a ul after you click the tab key.

<div>
  <ul>
     <li_1></li_1>
  </ul>
</div>

We can give HTML sibling tags by using emmet. (Elements that have the same parent are considered siblings.) To accomplish this, we must insert + symbols between tags.
That is, the code editor will construct siblings for two or more tags if their emmet shortcuts have a + in the middle.

div_1+p_1+div_2

The code editor will construct the three tags div_1, p_1, and div_2 as siblings when the tab key is pressed.

<div_1></div_1>
<p_1></p_1>
<div_2></div_2>

We now know how to include a child inside of a tag. But what if we need to put more children inside the tag (all with the same tag)? In certain circumstances, tag multiplication is an option. After the tag that needs to be multiplied and before the number of repetitions, we need to add a *.

ul_1>li*3

The code editor will produce an unordered list with 3 list entries when the tab key is pressed.

<ul_1>
   <li></li>
   <li></li>
   <li></li>
</ul_1>

Emmet can be used to group HTML tags. To accomplish this, a bracket must be placed around the tags that will be gathered ().

nav>(header>ul_1>li*2>a)+footer>p_1

When the tab key is pressed, the code editor will produce a nav containing child tags for the header, footer, and sibling footer, all of which include the child tag p_1.

<nav>
   <header>
       <ul_1>
           <li><a href=""></a></li>
           <li><a href=""></a></li>
       </ul_1>
   </header>
   <footer>
       <p_1></p_1>
   </footer>
</nav>

Alright, now that we have a fair idea about the Emmet Toolkit and its features, let us now move on to the Emmet Commands.

Here, we have all the important Emmet Commands with Examples.

<nav>
    <ul_1>
        <li>Name</li>
    </ul_1>
</nav>

<div></div>
<p_1></p_1>
<blockquote></blockquote>

<div_1></div_1>
<div_2>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div_2>

<nav>
    <header>
  <Table>
  <td><a href=""></a></td>
  <td><a href=""></a></td>
  </Table>
    </header>
    <footer>This is the footer</footer>
</nav>

<Table>
<Table_data></Table_data>
<Table_data></Table_data>
<Table_data></Table_data>
<Table_data></Table_data>
</Table>

<table>
    <tr>
  <td></td>
    </tr>
</table>

<picture>
    <source srcset="">
    <img src="" alt="">
</picture>

<heading_1 title="item_1">Header 1</heading_1>
<heading_2 title="item_2">Header 2</heading_2>
<heading_3 title="item_3">Header 3</heading_3>

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

<textarea name="" id="" cols="30" rows="10">Text area created</textarea>

<picture>
    <source srcset="" type="image/">
    <img src="" alt="">Picture tag created
</picture>

div {
    m:a
    p!+m10e!
}

div {
    margin: auto;
    padding:  !important;
    margin: 10em !important;
}

div {
    pos
    pos:s
}

div {
    position: relative;
    position: static;
}

div {
    t10
    l:a
    r10
    b20
}

div {
    top: 10px;
    left: auto;
    right: 10px;     
    bottom: 20px;
}

div {
    d
    d:n
    v:v
    v:h
}

div {
    display: block;
    display: none;
    visibility: visible;
    visibility: hidden;
}

div {
    mt200
    ml100
    mb200
    mr100
} 

div {
    margin-top: 200px;
    margin-left: 100px;
    margin-bottom: 200px;
    margin-right: 100px;
}

div {
    bxz
    bxsh
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset hoff voff blur color;
    -moz-box-shadow: inset hoff voff blur color;
    box-shadow: inset hoff voff blur color;
}

div {
    bg
    bg:n
    bgp10
    bgsz20
}

div {
    background: #000;
    background: none;
    background-position: 10px;
    -webkit-background-size: 20px;
    background-size: 20px;
}

div {
    ol
    ol:n
    ols
    ols:db
    olc
}

div {
    outline: ;
    outline: none;
    outline-style: ;
    outline-style: double;
    outline-color: #000;
}

div {
    bd+
    bdc:t
    bdlen:a
    bds
    bdw
}

div {
    border: 1px solid #000;
    border-color: transparent;
    border-length: auto;
    border-style: ;
    border-width: ;
}

Conclusion

In this article, we learned about the Emmet toolkit. We can conclude that Emmet provides us shortcuts to help us write Long HTML codes easily. It is a toolkit that is used to write HTML codes. It has various inbuilt powerful modules that follow simple syntax which makes it appealing to both beginners and experienced folks alike. A vast collection of functions makes writing codes of any sort much easier. In this cheat sheet, we have covered the most common fundamentals of Emmet that would help you kickstart your career in Web development.

Important Resources

• Web Development Projects
• Web Development Courses
• Web Developer Interview Questions
• Web Developer Skills