# Beginner’s Guide to Emmets in HTML

## What Emmet is?

Imagine you have to write `<div></div>` 100 times in an Html file. There are 2 problems which I see with this.

1. Time Waste - If you manually type this you are typing 1100 key strokes which is a boring and time consuming work.
    
2. Repititive code - You have to type this exact thing nothing is changing on the 1st time as well as 100th time
    

Now to solve this developers have introduced **Emmet abbreviations** which solves bothe the problems that the developer faces.

Consider it as auto-completion not for your text but for your code. It saves time and the amount of keystrokes you have to write in a boilerplate code.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769782419377/6336efd7-f3f7-4706-b63e-a4e77b51316f.png align="center")

As you can see I have written just div and it suggested me the whole code automatically saving my time and effort and it even puts my cursor in between those tags.

## How Emmet works inside code editors

In VS code - It comes as preinstalled plugin.  
Other code editors (Sublime Text, Atom) - You have to install it as a plugin.

## Basic Emmet syntax and abbreviations

Let’s look at some common syntax and abbreviations.

### Creating Basic Elements

Don’t type brackets and just type the tag name

| **Abbreviation** | **Expanded HTML** |
| --- | --- |
| `h1` | `<h1></h1>` |
| `p` | `<p></p>` |
| `button` | `<button></button>` |

### Adding Classes and IDs

Emmet uses the same classes and syntax as CSS.  
**Classes** - You can just type `div.container`

Result:

```html
<div class="container"></div>
```

**ID** - You can type div#main

Result:

```html
<div id="main"></div>
```

### Adding Attributes

Use square brackets `[]` to add attributes

| **Abbreviation** | **Expanded HTML** |
| --- | --- |
| `a[href="google.com"]` | `<a href="google.com"></a>` |
| `input[type="text"]` | `<input type="text">` |

### Nesting (The Child Operator `>`)

If you want to nest some tags like p wrapped in div container then use `div>p`

Result:

```html
<div>
    <p></p>
</div>
```

### Repeating Elements (Multiplication `*`)

If you want to write 5 item and for that you need 5 li tags the use `li*5`

Result:

```xml
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
```

### Combination

If we want to combine the nesting and repeating elements then use `nav>ul>li*3`

Result:

```html
<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>
```

## The Ultimate Shortcut: HTML Boilerplate

Everytime you start a html file you write the same old and boring boilerplate code, which is not a good practice. So emmet allows you to just write ! and get the whole boilerplate code as a suggestion.

Type: `!`

Result:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769781239498/e0f7a765-53cf-4f65-b6b6-a1af1959397e.png align="left")

## Summary

Use emmets as much as possible without it the journey will be very difficult. Just remember as you code next time use as much as emmet and it will become your habit.