Learning coding means GreatToCode Be more than a Coder ! Greattocode , Join GreatToCode Community,1000+ Students Trusted On Us .If You want to learn coding, Then GreatToCode Help You.No matter what It Takes !

CODE YOUR WAY TO A MORE FULFILLING And HIGHER PAYING CAREER IN TECH, START CODING FOR FREE Camp With GreatToCode - Join the Thousands learning to code with GreatToCode
Interactive online coding classes for at-home learning with GreatToCode . Try ₹Free Per Month Coding Classes With The Top Teachers . Emmet Tutorial: Basic to Advanced

Emmet Tutorial: Basic to Advanced

 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.

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 .

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.

COMMANDMEANINGEXAMPLE & 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: buttonThis 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: picThis 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: embThis 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: tareaThis 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: imgThis 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: pictureThis 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 SizingThis 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: BackgroundThis 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: OutlineThis 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: BorderThis 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.

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 }

Post a Comment

0 Comments

Post a Comment
•Give The opportunity to your child with GreatToCode Kid's • Online Coding Classes for Your Kid • Introduce Your kid To the world's of coding
•Fuel You Career with our 100+ Hiring Partners, Advance Your Career in Tech with GreatToCode. •Join The Largest Tech and coding Community and Fast Forward Your career with GreatToCode. •10000+ Learner's+ 90 % placement Guarantee. • Learning Coding is Better with the GreatToCode community .
•Greattocode Kid's •GreatToCode Career •GreatToCode Interview •GreatToCode Professional •GreatToCode for schools •GreatToCode For colleges •GreatToCods For Businesses.
Are you ready to join the millions of people learning to code? GreatToCode Pass is your one-stop-shop to get access to 1000+ courses, top-notch support, and successful job placement. What are you waiting for? Sign up now and get your future in motion with GreatToCode Pass.