Practice
Resources
Contests
Online IDE
New
Free Mock
Scaler
Practice
Improve your coding skills with our resources
Contests
Compete in popular contests with top coders
Scaler
Explore Offerings by SCALER

Before you go!

Take this "Emmet Cheat Sheet" interview guide with you

Emmet Cheat Sheet

Download PDF


Your requested download is ready!
Click here to download.

Introduction

Emmet is a toolkit for web developers that can significantly improve your HTML and CSS workflows. 

Basically, you can shop with the largest text content editor available, or shop and reuse a block of commonly used code called a "snippet". Snippets are a great way to increase productivity, but there are no unusual pitfalls in all implementations. You need to sketch the snippet first and it cannot be magnified at run time.

What is Emmet and Why use it?

Emmet takes the concept of snippets to a whole new level. You can enter a CSS-like expression that can be dynamically parsed and send output that depends on the input in the abbreviation. Emmet's workflow is based on HTML / XML and CSS but is designed and optimized for web builders that can also be used in programming languages.

Emmet allows you to write lightning-fast code. Simple CSS-like acronyms are turned into complex code. Easily generate lorem ipsum text, use many keyboard shortcuts, and more.

Features

  • You learn how to employ Emmet from a web-developer perspective. As a web developer, you know how to use Emmet using abbreviations. They are just like CSS Selectors with shortcuts for id, class, custom attributes, detail nesting, and so on. They are dynamic, parsed as you type, and provide dynamic snippets.
  • Dynamic snippets are unlike default editor snippets, in that they are dynamic and parsed as you type. For instance, to create a tag, write MyComponent>custom-element.
  • Emmet provides a unique syntax for CSS values embedded within Emmet. For instance, bd1-s#0.5 may be phrased to border: 1px solid rgba (0, 0, 0, 0.5).
  • Available for maximum famous syntaxes: use the simple abbreviation to supply code for maximum famous syntaxes like HAML, Pug, JSX, SCSS, SASS, etc.

How To Use Emmet?

Emmet can be utilized by including emmet plugins in the IDEs. Adding emmet plugins to IDEs and the use of emmet is mentioned in upcoming sections.

Adding Emmet to the IDE:

  • Almost all modern IDEs, including VS Code, allow emmet support. However, if the plugin is not available by default in an IDE, it can be downloaded from the emmet website.

Using Emmet in the Code:

  • When the emmet plugin is added to the IDE, simply enter the HTML tag without <> and the editor will show suggestions for the tag. Emmet uses a CSS-like selector syntax. Write a CSS-like abbreviation, place your cursor at the end of the abbreviation, and press Tab, Ctrl+E, or any other keyboard key configured to convert the abbreviation to actual HTML code. Emmet expands to. You can also provide a value, but if you don't, a tab will be created within each empty property. You can paste the target URL and press Tab to go to the next edit point where you can paste the next desired value.
Crack your next tech interview with confidence!
Take a free mock interview, get instant⚡️ feedback and recommendation💡

Emmet Tutorial: Basic to Advanced

1. Adding ID and CLASS attributes

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

2. Adding Custom Attributes

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>

3. Adding Text

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>
You can download a PDF version of Emmet Cheat Sheet.

Download PDF


Your requested download is ready!
Click here to download.

4. Adding Child

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>

5. Adding Sibling

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>

6. Multiplication

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>

7. Grouping

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>

8. Emmet Commands

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.

COMMAND MEANING EXAMPLE & SYNTAX
Child: >

This code uses the “> “operator to nest elements inside each other.


 

Syntax :  nav>ul_1>li{Name} 

Output:

<nav>
    <ul_1>
        <li>Name</li>
    </ul_1>
</nav>
Sibling: + This code uses the “+” operator to place elements near each other, on the same level:

Syntax :  div+p_1+bq

Output:  

<div></div>
<p_1></p_1>
<blockquote></blockquote>
Climb-up: ^ With the “^” operator you’re descending down the generated tree and the positions of all sibling elements will be resolved against the deepest element:

Syntax :  div_1+div_2>p>span+em^bq

Output: 

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

Grouping: ()


 

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

Syntax :  (nav>(header>Table>td*2>a)+footer>{This is the footer})

Output: 

<nav>
    <header>
  <Table>
  <td><a href=""></a></td>
  <td><a href=""></a></td>
  </Table>
    </header>
    <footer>This is the footer</footer>
</nav>
Multiplication: * This code uses the operator “*” to specify how many times an element should be written

Syntax :  Table>Table_data*4

Output: 

<Table>
<Table_data></Table_data>
<Table_data></Table_data>
<Table_data></Table_data>
<Table_data></Table_data>
</Table>
Addition: + This code uses the Operator “+” to write a complete tag in short

Syntax: table+

Output:

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

Syntax: pic+

Output:

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

Item numbering: $


 

Elements can be repeated using the multiplication * operator, but they can be numbered using the $ operator. To print the current number of repeated elements, place the $ operator inside an element's name, an attribute's name, or an attribute's value:

Syntax :  heading_$[title=item_$]{Header $}*3

Output: 

<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>
HTML:! This code uses the Operator “!” to create the default body for HTML code

Syntax: !{Default HTML body}

Output:

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

HTML: input


 

This code will help us to write HTML <input> elements and define input control. Syntax :input:color{Input tag for color created}
Output:
<input type="color" name="" id="">Input tag for color created
HTML: button This code will create a button tag in the HTML code, used to define a clickable button.

Syntax: button:reset/button:r/btn:r{This is RESET}

Output:

<button type="reset">This is RESET</button>

HTML: pic This code will create a picture tag in the HTML code, used to define containers for multiple image resources. Syntax: pic{Picture tag created}
Output:
<picture>Picture tag created</picture>
HTML: emb This code will create an embed tag in the HTML code, used to define a container for an external application. Syntax: emb{Embed tag created}
Output:
<embed src="" type="">Embed tag created
HTML: tarea This code will create a text area with default of 30 columns and 10 rows.

Syntax: tarea{Text area created}

Output:

<textarea name="" id="" cols="30" rows="10">Text area created</textarea>
HTML: img This code will create an image tag in the HTML code, used to define an image. Syntax: ri:dpr/ri:d{Img tag created}
Output:
<img srcset="" src="" alt="">Img tag created
HTML: picture This code will create an embed tag in the HTML code, used to define a container for multiple images.

Syntax: ri:type/ri:t{Picture tag created}

Output:

<picture>
    <source srcset="" type="image/">
    <img src="" alt="">Picture tag created
</picture>
CSS : “!” important modifier

This modifier is used to override ALL previous styling rules for that specific property on that element!




 

Syntax:

div {
    m:a
    p!+m10e!
}

Output:

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

Note: Margin auto was overridden with a 10em value

CSS: Visual Formatting

pos

This code will apply position properties to the tag:

 

pos will apply relative default

pos:s will apply position:static;

pos:a will apply position:absolute;

pos:r will apply position:relative;

Pos:f will apply position:fixed;

Syntax: 

div {
    pos
    pos:s
}

Output: 

div {
    position: relative;
    position: static;
}
CSS: Visual Formatting

t,r,l,b

This code will also apply positioning property to the tag based on margin:


top/t - Sets the top margin edge 

left/l - Sets the left margin edge 

right/r - Sets the right margin edge 

bottom/b - Sets the right margin edge

Syntax:

div {
    t10
    l:a
    r10
    b20
}

Output:

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

d,v

This code will apply display and visibility properties to the tag and can be varied as per requirement.


 



 

Syntax:

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

Output:

div {
    display: block;
    display: none;
    visibility: visible;
    visibility: hidden;
}
CSS: Margin & Padding

This code will apply Margin and padding properties to the tag and are used to create space around elements, outside of any defined borders.

 

The following values can be applied to all margin properties:


 

auto: The margin is calculated by the browser

length: The margin values can be set to px, pt, cm, etc.
% : designates a margin as a percentage of the contained element's width.
inherit : instructs the margin to be carried over from the parent element.

Syntax:

div {
    mt200
    ml100
    mb200
    mr100
} 

Output:

div {
    margin-top: 200px;
    margin-left: 100px;
    margin-bottom: 200px;
    margin-right: 100px;
}
CSS: Box Sizing This code will apply design and layout properties to the container. Consists of: margins, borders, padding, and the actual content. 

Syntax:

div {
    bxz
    bxsh
}

Output:

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;
}
CSS: Background This code will apply background properties to the tag/element and is used to add background effects for elements.

Syntax:

div {
    bg
    bg:n
    bgp10
    bgsz20
}

Output: 

div {
    background: #000;
    background: none;
    background-position: 10px;
    -webkit-background-size: 20px;
    background-size: 20px;
}
CSS: Outline This code will apply outline properties to the tag/element and is used to add outline effects for elements.

Syntax:

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

Output:

div {
    outline: ;
    outline: none;
    outline-style: ;
    outline-style: double;
    outline-color: #000;
}
CSS: Border This code will apply border properties to the tag/element and is used to add outline effects for elements.

Syntax:

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

Output:

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

Multiple Choice Questions

1.

Emmet is a-

2.

Select the correct Emmet code for the following HTML code-

<div_Test>
<Table>
    <Table_Data></Table_Data>
</Table>
</div_Test>
3.

Select the correct Emmet code for the following HTML code-

<nav>
   <header>
    <Table_1>Blank</Table_1>
    <Table_2>
     <Data><a href="">Link1</a></Data>
     <Data><a href="">Link2</a></Data>
    </Table_2>
   </header>
   <footer>
    <ph></ph>
   </footer>
</nav>
4.

How can the text colour of an element be changed using Emmet?

5.

Select the correct Emmet code for the following CSS code-

div {
 width: 30px;
 padding: 10px;
 border: 5em;
 margin: auto;
}

a. 

div { w30
p10
b5
Ma }

b.

div{ w30px
    p10px
    bd5px
    Mauto }

c. 

div{ w30
    p10
    bd5em
    m:a }

d. 

div{ w30px
    p10px
    bd5
    M:a }
Get Placed at Top Product Companies with Scaler Know More 
Get Placed at Top Product Companies with Scaler Know More 
Get Placed at Top Product Companies with Scaler
Sat transparent 640a34d454880bf68e3bfdf33f2389f2214043f59ad18b4c7f7b114e834fb257.svg

Point markers b3add1cc88e4996b2df6e0aedb9f0d1b65fa73c51b7ada8fbee3895a2aa11802.svg Personalised feedback report with solutions
Point markers b3add1cc88e4996b2df6e0aedb9f0d1b65fa73c51b7ada8fbee3895a2aa11802.svg Real life Interview Questions
Point markers b3add1cc88e4996b2df6e0aedb9f0d1b65fa73c51b7ada8fbee3895a2aa11802.svg Identify exact topics to improve

Your feedback is important to help us improve.
Free Mock Assessment
Fill up the details for personalised experience.
All fields are mandatory
Current Employer *
Enter company name *
Graduation Year *
Select an option *
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
Phone Number *
OTP will be sent to this number for verification
+91 *
+91
Change Number
Phone Number *
OTP will be sent to this number for verification
+91 *
+91
Change Number
Graduation Year *
Graduation Year *
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
*Enter the expected year of graduation if you're student
Current Employer *
Company Name *
Please verify your phone number
Edit
Resend OTP
By clicking on Start Test, I agree to be contacted by Scaler in the future.
Already have an account? Log in
Free Mock Assessment
Instructions from Interviewbit
Start Test