Emmet Shortcuts You Should Know
Tags: productivity, vscode, webdev, html
Published: 2022-01-15 13:23:54

Hey readers  👋

This is my first post on DEV, I hope you all will love it. 


## Introduction

In this post, we will look at some of the useful Emmet shortcuts. Though there are tons of Emmet shortcuts, we will be looking at major and useful ones. 

Before getting started, what Emmet actually is? As per [official website](https://emmet.io/)

> Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

That's right. Emmet helps you to improve your HTML and CSS workflow, we will look at how. You have been using Emmet if you are using VS Code ( Duh, who doesn’t use VS Code? )  

Okay, without further ado, let’s get started. 

## HTML Boilerplate

You can type ( ! ) and hit enter to get the HTML boilerplate


![HTML Boilerplate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzizfreh77tvxy9lzdzb.gif)

The same can be achieved by `html:5` but as a developer, we love to type fewer characters.

## Nesting Operators

Nesting operators will help you to generate HTML elements that may be nested or can be placed as a sibling or you can add text and generate numbers too. 

### Child:  >

The child (>) operator can be used to nest elements inside each other. 

```css
nav>ul>li
```

![child operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv8tw2vbkokvc4xh7zd9.gif)

### Sibling:  + 

Let’s say you need to place three elements as siblings, use + operator to achieve this. 

```css
header+main+footer 
```


![Sibling Operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2k0s71iqnwtbv1pq4ujm.gif)


### Climb up:  ^

What if you need to climb one stage up? We are nesting element using child (>) operator but with ( ^ ) operator you can go one step up. 

```html
header+main>section>article^h1
```

![Climb up operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57qceui9xo31b91bgigs.gif)

Here we are inserting `section` and `article` inside of `main` but we want to add `h1` nested inside the `main` and sibling of `section`


### Multiplication:  *

My favorite one. Using this operator we can specify how many elements we want. 

```html
ol>li*5
```


![Multiplication Operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlumlv9vu5yerjjx3trq.gif)

### Grouping: ()

Grouping allows us to create complex markup. It basically considers a group a single element. 

```html
header>(nav>ul>li*5)+main+footer
```


![Grouping Operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyn1rhphdrgqh5uvjuky.gif)

We can also multiply the group and it will return the group multiple time

```html
dl>(dt+dd)*3
```

## Attribute Operators

Emmet allows you to set the attributes for your HTML elements.

### ID and Class

To set the ID on your HTML element use # and for class attribute use dot ( . )

```html
div.container>h1#heading 
```


![Adding ID and Classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21ugidmk1mqx7av45i8l.gif)

### Custom Attributes

Just like the attribute selector in CSS, we can use Emmet to set the custom attribute 

```html
input[type='text']
```

![Custom Attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alhl5bwo7vz8alahtybc.gif)

Note: 

- We can specify as many attributes as we want.
- We also don’t need to add value to the attribute, providing only attribute names will generate elements with empty attributes.

## Text - {}

The last shortcut we will be looking at is adding text content in the element. And also the lorem ipsum text generation. 

Use {} to add text and `lorem` keyword to add the dummy text 

```html
p{lorem}

p>lorem10
```


![Text Operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3z6q665eu5vihtm0e04y.gif)

## CSS

Emmet provides a lot of CSS abbreviations to write faster. It will be tiresome to add all of them here.  I will link the cheat sheet at the end of the article. 

Some of the examples of CSS are `pos` get converted into `position: relative` you can also specify which position value you need like `pos:a` it will give `position: absolute` 

Similarly, there are shortcuts for margin and padding, border, outline, box-sizing, and so on. 

---

Awesome! You reached the end of this article. Thank you for taking the time to read this. 

If you liked this article, you will love my tweets. I share useful tips around web development and resources to learn the same. 

You can follow me on [Twitter](https://twitter.com/junaidshaikh_js) or connect with me on [LinkedIn](https://www.linkedin.com/in/junaidshaikhjs/) 

Here is the [cheatsheet](https://docs.emmet.io/cheat-sheet/) I was talking about. 

Keep coding 😃

You can support this article here...

<a href="https://www.buymeacoffee.com/junaidshaikhjs" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>