Emmet makes life easier..!
Published: 2021-12-27 16:27:27

## _<u>INTRODUCTION TO EMMET:</u>_



**EMMET** -  It is the essential tool kit for the web-developers.
- This improves the HTML and CSS workflows.
- You can write lot of code quickly.
- This is one of the built - in feature of VS code.

Let's jump into how to implement / use / write HTML script using Emmet:


Open you VS code, In an HTML file simply type **!** and you can see the pop-up as suggestion which is nothing but the Emmet.
Now hit **Enter** button, HTML syntax is ready for you:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qffeprqin2dp044hrt6m.png)
  
Let us see what are the **basic tags** in HTML we can perform using EMMET:

- To create the HTML tags just type the TAG name and hit ENTER.
- You need to be very keen observer where your cursor is pointing in the tag.

**<u>Try Typing the below to see how Emmet works:</u>**

Type **div** then **ENTER**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/derwmwc77idylg1vwhd9.png)
 
Type **h1** then **ENTER**:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2f0lcj5u62r0l3il7zm3.png)
 

- Similar way, we use 

`bq for <blockquote>
hdr for <header>
ftr for <footer>
btn for <button>
sect for <section>`



## <u>- Usage of EMMETS in **Classes**:</u>

EMMET uses the same way to refer the classes using **. ** .

Example:

```
div.Hero1—> <div class="Hero1"></div>
```

```
h1.Hero1.Hero2 —> <h1 class="Hero1 Hero2"></h1>
```





## <u>- Usage of Emmet in **ID's**:</u>

Example:

```
div#hero —> <div id="hero"></div>
```



## - You can also **combine class and ID's using EMMET**
:

```
div#hero.wrapper —> <div id="hero" class="wrapper"></div>
```



## **_Let us focus more into HTML Tags and their properties:_**


<u>- **Anchor tag:**</u>
An anchor tag is a HTML element that creates a link to a target URL.

- 1. Type **a** then you can see the following suggestions:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qe3dhptbnx8rz6rvmjf.png)


```
<body>
    
    <!--if you click on a:blank which means when you click on link, it OPENS IN NEW TAB. -->
    <a href="http://poornachary.netlify.com" target="_blank" rel="noopener noreferrer">link</a>

    <!--a:link, simply adds a link and it opens in same tab.-->
    <a href="http://poornachary.netlify.com">link</a>

  <!--if you want to link any email address you can user a:mail-->
<a href="mailto:poornachary1@gmail.com">email</a>

    <!--to link a phone number you can use a:tel-->
    <a href="tel:+91-1234567890">phone number</a>

</body>
```


## **<u>- How to link CSS in HTML using EMMET:</u>**


```
link:css --> <link rel="stylesheet" href="style.css">

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77jlty5py7cjymjqjqk5.png)
 


**<u>- Images using EMMETs:</u>**

Type **img** in body

```
img --> <img src="xyz.jpg" alt="">
 
```



## **Buttons:**

In HTML Buttons are very important:

It is hard to remember all the buttons and the tags in HTML, but Emmet makes easier for us.


`Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element!`

Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.

The keyword for button is **btn**:

There are 3 types of Buttons:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuyuh9whxs1xvxwg1k9v.png)


```
btn:d (Disabled) >>
 <button disabled="disabled">disabled button</button>

btn:r (reset) >>
<button type="reset">Reset button</button>

btn:s (submit) >>
 <button type="submit">Submit button</button>

```

![The output is below:](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gnd26r4zxuosnkf8dya.png)



## - **Siblings Children & Grouping using Emmet:**

It just keeps getting better. We can also specify siblings and children using the + and > characters.

```
Sibling Relation:(+)
section+section —> <section></section><section></section>

Child Relation:(>)
ul>li —> <ul><li></li></ul>

Grouping:(   ()   )
div>(header>ul>li.type$*3)+footer>p

 <div>
        <header>
            <ul>
                <li class="type1"></li>
                <li class="type2"></li>
                <li class="type3"></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

```
**CHEAT SHEET for EMMET:**

[Download Now!](https://docs.emmet.io/cheatsheet-a5.pdf)

## Conclusion:

Though HTML seems to be simple but I feel it is hard to remember all the tags and attributes. Instead of byhearting (Depending) the tags you can make habit of using Emmet and it makes life simple.

**Thankyou for reading my Blog. Appreciate your time!**