div.header 👇
<divclass="header"></div>
```
- Add ID and CLASS attr
```html
form#search.info 👇
<formid="search"class="info"></form>
```
- Add multiple CLASS and ID attr
```html
p.info1.info2.info3#info
<pclass="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><ahref="">Google</a></header>
```
5. GROUPING
```html
div>(header>ul>li*2>a)+footer>p 👇
<div><header><ul><li><ahref=""></a></li><li><ahref=""></a></li></ul></header><footer><p></p></footer></div>
```
6. IMPLICIT TAG NAMES
- Adding multiple child element with same class
```html
ul>.item👇
<ul><liclass="item"></li></ul>
```
```html
table>.row>.col*3 👇
<table><trclass="row"><tdclass="col"></td><tdclass="col"></td><tdclass="col"></td></tr></table>
```
7. ITEM NUMBERING
- Adding numbered class names to child elements
```html
ul>li.item$*5
<ul><liclass="item1"></li><liclass="item2"></li><liclass="item3"></li><liclass="item4"></li><liclass="item5"></li></ul>
```
##Thank you for following✨
What other VSCODE shortcut can you suggest?
comment below👇👇
GitHub Campus Expert🚩 || Beta MLSA ||
Promoting & sharing educative tips & resources from Devs💻 and for Devs💻| Buy me a ☕
https://www.buymeacoffee.com/qbentil
Top comments (3)
These are not VSCode shortcuts, they are emmet snippets
Thank you 👍
Yup... Emmet has been around longer than VS Code - and is available in many IDEs