# Improve your HTML workflow using Emmet


**Emmet** from the official [website](https://emmet.io) is defined as a plugin for many popular text editors which greatly improves HTML & CSS workflow.
Consistent practice using emmet can greatly improve your productivity. 
An example is creating a list in HTML, the default way is to type out everything line by line like 
```HTML5
<ul class='list'>
    <li>List-Item-1</li>
    <li>List-Item-2</li>
    <li>List-Item-3</li>
</ul> 
```
But using emmet `ul.list>li{List-Item-$}*3` is enough to give the same output.

Let's move to install emmet to your programming environment.

## Installation
For this article, I will be using VSCode which has emmet support by default.
If you are using a different text editor check the official [site](https://emmet.io) for download instructions.

## Getting started
We are going to explore some features of emmet in an HTML file.
Let us start by creating a new HTML file called `index.html`
Inside the file, let us create the boiler-plate code by typing `html:5` then hitting the `tab` key.
You will notice this generates code like
```HTML5
<!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>
```
### Creating child elements
Child elements are elements that are direct children of some elements. Take this block code for instance
```HTML5
<nav class="parent">
    <div class="child"></div>
</nav>
``` 
**nav** is the parent to the **div** 
To create elements with children, 
```HTML5
nav.parent>div.child
```
Notice the **>**, this is what indicates that the elements to the right of **>** are the children of whatever element is on the left.


### Creating sibling elements
Sibling elements are elements that share the same parent. 
```HTML5
<nav class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</nav>

```
In the above example, `child1`,`child2` and `child3` all share the same parent. 
To create this structure, 
```HTML5
nav.parent>div.child1+div.child2+div.child3
```
### Climbing up
You may want to create an element with children and then another element on the same level as the parent such as
```HTML5
<nav class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</nav>
<div class="otherdiv"></div>

```
Using emmet 
```HTML5
nav.parent>div.child1+div.child2^div.otherdiv
```
### Grouping
You may want to group some elements together and then create other elements on the fly such as.
```HTML5
<nav class="parent">
        <div class="child1">
            <ul>
                <li class="list-item"></li>
            </ul>
        </div>
        <div class="child2">
            <a href="" class="link1"></a>
            <a href="" class="link2"></a>
            <a href="" class="link3"></a>
        </div>
    </nav>

```
Using emmet it is pretty simple 
```HTML5
 nav.parent>(div.child1>ul>.list-item)+div.child2>(a.link$)*3
```

### Text
Adding text to tags is a pretty common thing to do and that is why emmet has a handy shortcut to do this.
To create a p tag with some text inside its as simple as
```HTML5
p{Some text has got to be here}
```

## Conclusion
Emmet is a perfect way to improve your workflow when writing HTML and from the examples above you can see how easy it is to write complex structures with just a line of code.
The features described here are not all, and I would recommend going through the Emmet [docs](https://emmet.io) to see more uses cases.
Happy Coding.