div#info 👇
<div id="info"></div>

div.header 👇
<div class="header"></div>
```


 - Add ID and CLASS attr


```html
form#search.info 👇
<form id="search" class="info"></form>
```


 - Add multiple CLASS and ID attr


```html
p.info1.info2.info3#info
<p class="info1 info2 info3" id='info'></p>
```



2.  ELEMENT WITH CHILD and MULTIPLICATION

  - Add child element to a parent element


````html
ul>li 👇
<ul>
    <li></li>
</ul>
```



 - Add multiple child elements


```html
ul>li*5 👇
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```



3.  ELEMENT with SIBLINGS
 - Add html element next to another


```html
div+section+p 👇
<div></div>
<section></section>
<p></p>
```



4. HTML tag with TEXT


```html
a{Google} 👇
<header> <a href="">Google</a> </header>
```



5.  GROUPING


```html
div>(header>ul>li*2>a)+footer>p 👇
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
```



6. IMPLICIT TAG NAMES
 - Adding multiple child element with same class


```html
ul>.item👇
<ul>
    <li class="item"></li>
</ul>
```




```html
table>.row>.col*3 👇
<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>
```



7. ITEM NUMBERING
- Adding numbered class names to child elements


```html
ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
```



##Thank you for following✨
What other VSCODE shortcut can you suggest? 
comment below👇👇