# Emmet for HTML: A Simple Guide for Beginners to Write Faster Code

When I started learning HTML, I felt very slow and confused.  
I used to type every tag fully. `<html>`, `<head>`, `<body>`, everything.  
Sometimes I missed closing tags. Sometimes I forgot quotes.

I remember one day I spent almost 10 minutes just writing basic HTML structure.  
I thought coding is very hard and maybe not for me.

Later, while watching a beginner video, I saw the teacher typing just one line and pressing Enter.  
Suddenly, full HTML code appeared. I was shocked.

That was my first time seeing Emmet for HTML.  
At first, I was scared again. New thing, new rules.  
But when I tried slowly, I felt relief.

In this blog, I will explain Emmet in the same simple way I understood it.  
No big words. No pressure.

---

## WHAT IS EMMET FOR HTML?

Emmet is a shortcut way to write HTML.  
That’s it. Nothing more.

Instead of typing full HTML tags,  
you type small shortcuts and press Enter.

Emmet automatically converts shortcuts into full HTML code.

Think like this:  
HTML is writing full sentences.  
Emmet is using short forms.

Example:  
You write “pls” instead of “please”.  
Emmet works in the same way.

Emmet is not a new language.  
It is just a helper for HTML.

---

## SIMPLE REAL-LIFE EXAMPLE

Imagine you are ordering food every day.

Instead of saying:  
“I want one idli with sambar and chutney”

You say:  
“Idli combo”

The shopkeeper understands and gives full plate.

Emmet works like “idli combo”.  
You type a short word.  
Editor gives full HTML.

Short input.  
Big output.

---

## PRACTICAL PART (BASIC & REQUIRED)

### 1\. Writing HTML without Emmet (slow way)

```plaintext
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
  </body>
</html>
```

Typing this takes time.

---

### 2\. Writing HTML with Emmet (fast way)

In editor, type:

```plaintext
!
```

Press **Enter**

Output:

```plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
</body>
</html>
```

This is called **HTML boilerplate**.

---

### Creating HTML elements

Emmet:

```plaintext
p
```

Output:

```plaintext
<p></p>
```

---

### Adding class and id

Emmet:

```plaintext
div.container
```

Output:

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

Emmet:

```plaintext
section#main
```

Output:

```plaintext
<section id="main"></section>
```

---

### Nested elements

Emmet:

```plaintext
div>p
```

Output:

```plaintext
<div>
  <p></p>
</div>
```

---

### Repeating elements

Emmet:

```plaintext
li*3
```

Output:

```plaintext
<li></li>
<li></li>
<li></li>
```

You will use this a lot.