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