HTML Shortcuts in VS Code
Published: 2024-03-21 11:28:48

## Speed Coding
Becoming an efficient developer sometimes requires us to spend a little time to learn a few shortcuts.  And here Emmet is helping us.  Emmet is a plug-in which ships with VS Code and provides shorthand notations for HTML when writing code in .html files. 

**Shortcut Features Include:**
* [HTML Page Template](#template)
* [Elements](#elements)
* [Sibling Elements](#sibling)
* [Child Elements](#child)
* [Grouping](#group)
* [Climb Up](#climb)
* [Multiple Elements](#multi)
* [Class & ID's](#class)
* [Adding Text](#text)
* [Custom Attributes](#custom)
* [Numbering](#num)
* [Tag Attributes](#tag)
* [Place Holder Text](#lorem)

{% embed https://youtu.be/SLkihdVYlXw %}

**Note:** To accept the emmet shortcut, press "Tab" or "Enter.  And to skip all the suggestions, press "Esc" or adding a space will remove the list.


### HTML Page Template <a name="template"></a>
To add the new page boilerplate code, insert:
```
!
```
And then enter to get:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```


### Elements <a name="elements"></a>
Type any element tag name 
```
h1
```
To get the closing and opening tags
```
<h1></h1>
```


### Sibling Elements <a name="sibling"></a>
Use + 
```
header+footer
```
To add element on the same level
```
<header></header>
<footer></footer>
```


### Child Elements <a name="child"></a>
Use > 
```
    header>nav
```
To add a nested element
```
    <header>
        <nav></nav>
    </header>
```


### Grouping <a name="group"></a>
Use ()  
```
    header+(main>section)+footer
```
To group elements
```
    <header></header>
    <main>
        <section></section>
    </main>
    <footer></footer>
```


### Climb Up <a name="climb"></a>
Use ^ to escape a level of nesting
```
    header+main>section^footer
```
To escape a level of nesting
```
    <header></header>
    <main>
        <section></section>
    </main>
    <footer></footer>
```


### Multiple Elements <a name="multi"></a>
Use * 
```
    ul>li*4
```
To multiply the number of elements
```
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
```


### Class & ID's <a name="class"></a>
Use .
```
    nav.my-nav
```
To add a class
```
<nav class="my-nav"></nav>
```

And #
```
nav#my-id
```
To add an ID
```
<nav id="my-id"></nav>
```


### Adding Text <a name="text"></a>
Use {}
```
button{Click Me}
```
To add text between the tags
```
<button>Click Me</button>
```


### Custom Attributes <a name="custom"></a>
Use []
```
button[data-id=btn-id]
```
To add a custom attribute inside the tag
```
<button data-id="btn-id"></button>
```


### Numbering <a name="num"></a>
Use $
```
ul>li*3#my-item${I'm number $}
```
To add numbering for the element
```
<ul>
    <li id="my-item1">I'm number 1</li>
    <li id="my-item2">I'm number 2</li>
    <li id="my-item3">I'm number 3</li>
</ul>
```


### Tag Attributes <a name="tag"></a>
Use :
```
script:src
```
To add attributes
```
<script src=""></script>
```


### Place Holder Text <a name="lorem"></a>
Use :
```
lorem6*3
```
To add chunks of dummy text
```
Lorem ipsum dolor sit amet consectetur.
Expedita quasi aspernatur velit commodi repellendus?
Voluptas voluptatibus numquam et nam ratione.
```

See the video for more explanation and check out the ["Emmet Cheat Sheet"](https://docs.emmet.io/cheat-sheet/) for more examples.

And make sure you start using shortcuts to accelerate your coding!