Level up by using the Emmet

Sahil Kumar Singh's photo
Sahil Kumar Singh
·

2 min read

Table of contents

In this Blog, You are going to learn Some tricks to write multiple lines of code in some words with the help of the Emmet plugin.

So, let's start with the very basics and dive deep into it.

Parent-Child

By the name you can guess that one is a parent and the other is a child. So in this, we can create an element inside another one. You can see the Picture for an analogy which is given below.

Parent-Child in Action

We specify a Child by using the Child Operator > and then create an element inside of another one (as many as you require).

Example: If you want to write this line of code (given below)

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

Then, Here You can write this div>ul>li

The element left of the greater than > symbol will act as a parent for the element to the right.

div>ul>li => Tab key
Result:
<div>
    <ul>
        <li> </li>
    </ul>
</div>

Adding Siblings

By name Siblings means children having common or the same parents

To do this we insert the plus+ the symbol between the tags.

Example: To write this (given below)

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

You can write div>p+p

div>p+p => Tab key
Result:
<div>
    <p></p>
    <p></p>
</div>

If you like till here, Hit the Like button

Multiplication

If you need to put more children inside the tag, then before the number of repetitions put the Asterisk symbol (*) and enter the number of repetitions

Example: ul>li*4 See the code(given below)

ul>li*4 => Tab
Result:
<ul>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
</ul>

Grouping

Grouping enables you to write multiple lines of code in just a few words.

To do this we use the bracket () and the tags must be placed inside the tags that will be gathered.

Example: To write this code (given below)

<div>
  <nav>
    <ul>
      <li><a href="https://hashnode.com/@sahilbuild"></a><li>
      <li><a href="https://www.instagram.com/sahildecodes/"></a><li>
    </ul>
  </nav>
</div>

Here, You can write div>(nav > ul > li*2 > a)

div>(nav > ul > li*2 > a)+footer => Tab key
Result:
<div>
  <nav>
    <ul>
      <li> <a href="https://hashnode.com/@sahilbuild"></a><li>
      <li> <a href="https://www.instagram.com/sahildecodes/"></a><li>
    </ul>
  </nav>
    <footer> </footer>
</div>

Follow me for more amazing content like this, Thank you.

GET YOUR PRACTICE SET Click on the link https://docs.google.com/document/d/1-j976W7TYOMKbKJZI9Mlh4uxGRc7YWTpvwLkQme4NmI/edit?usp=sharing

Web DevelopmentHTML5JavaScriptCSSEmmet