Boost your HTML and CSS writing with Emmet
Tags: html, productivity, codenewbie, vscode
Published: 2020-02-11 20:00:38

Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL and other structured code formats via content assist. Emmet lets you write less code and do more. In VSCode you can use Emmet without installing it. If you want to get Emmet for other editors like Notepad++, Atom, Sublime text etc you can [download](https://emmet.io/download/) and install it. <br>

- **Basic HTML template**: Instead of writing html, header, title, body tag one by one you can simply write **`!`** and press tab. This will make a basic template for you.
- **Complete html tag**: If you want to make a header 1, instead of doing hard code `<h1></h1>` like this you can type **`h1`** and hit enter, and emmet will create the header 1 tag with closer for you. You can do this for all the HTML tags instead of writing the whole tag by yourself. All you need to write the name of the tag. e.g. **`div`** -> `<div></div>`, **`header`** -> `<header></header>`, **`p`** -> `<p></p>` and so on.

- **Tags with class**: If you want to make a class inside a div you can write **`.myDiv`** and hit enter. It will create a div with a class named myDiv. By default anything after **dot (.)** creates class for a div. You can also do the same for other tags. Write **`tagName.className`** and it'll create the class for the specific tag.  Lets say, you want to make a class for header 1. Just type **`h1.myHeader`** and hit enter
```html
<div class="myDiv"></div>
<h1 class="myHeader"></h1>
<h2 class="myHeader"></h2>
<p class="myParagraph"></p>
<span class="mySpan"></span>
<b class="myBold"></b>
```
and so on. 
- **Tags with id**: Sometimes you may want to give an id to a div. You can do it easily just by pressing **`#id`**. Its the same as the class but instead of **dot(.)** sign you need to use **hash(#)** sign. Like this **`h1#header1`**
```html
<div id="id"></div>
<h1 id="header1"></h1>
<h2 id="myHeader"></h2>
<p id="myParagraph"></p>
<span id="mySpan"></span>
<b id="myBold"></b>
```
and so on. 

- **More than one class onto the same element**: You can create more than one class or id onto the same element. For this you need to write **`class1.class2`** and it will give you 
```html
<div class="class1 class2"></div>
```
If you want to create two class and a id at a time you can simply write **`class1.class2#myId`** and hit enter. This will provide you two classes with a id in a div 
```html
<div class="class1 class2" id="myId"></div>
```
You can do this for a header or a paragraph. Just put **`h1`** tag before **`class1.class2#myId`** and it will do the same for header 1. 
- **Text inside element**: You can write a text inside your element using emmet. If you want to write something inside a header you can write **`h1{This is header one}`** and hit enter. It will do the rest for you. 
```html
<h1>This is header one</h1
```
- **Generate Lorem Ipsum**: If you frequently use dummy text for your development and every time you go and copy the text from [here](https://www.lipsum.com) then this is perfect shortcut for you. Inside a paragraph tag just write **`lorem10`**. This will generate 10 dummy word for you inside the `p` tag. 
```html
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, quasi!</p>
```
You can get as much text as you want. Just write your number of words after *lorem* e.g. **`lorem100`**, **`lorem2000`**
- **Child and sibling elements**: You can write more than one tag at one go. Let's say you want 5 `li` inside a `ul` and that `ul` should be in a `p`. So you can write something like this **`p>ul>li*5`**, hit enter and emmet will create below code for you -
```html
    <p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>
```
What if you want to make a `form` and inside a form you wanna have one text input and a submit button. Write ***`form:post>input:text+input:s`**. It will generate the below code -
```html
    <form action="" method="post">
        <input type="text" name="" id="">
        <input type="submit" value="">
    </form>
```
These are the shortcuts that I mostly use. But if you are interested for more shortcuts like this for HTML and CSS you can visit this [link](https://docs.emmet.io/cheat-sheet)

Thank you all.