# Emmet for HTML
**Introduction**
Let’s be honest. Typing HTML is slow. You type `<` then `div` then `>` then `class` then `=` then `"`... it’s exhausting. If you are writing every single bracket manually, you are doing it the "hard way."
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769944365486/39f00eba-95d3-4159-8b13-f36f7dd2ea20.png align="center")
What if I told you there is a way to type `div.container` and have the code write itself? Welcome to **Emmet**.
### **1\. What is Emmet?**
Emmet is a plugin (built into VS Code) that acts like a **Translator**. You speak in "Shorthand," and Emmet translates it into full "HTML."
* **You type:** `h1` + `Tab`
* **Emmet writes:** ``
It’s not a new language. It’s just a faster way to write the HTML you already know.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769944826180/f8d9b026-c8ab-4a6a-a148-9f58af7f2e72.png align="center")
### **2\. How to use it?**
If you use **VS Code**, good news: You already have it! It comes pre-installed. Just open an HTML file, type a shortcut, and hit **TAB** (or Enter).
* *Note: If it doesn't work, make sure your file is saved as* `.html`.
### 3\. Tags, Classes, and IDs
**The Simple Tag** Stop typing brackets. Just type the name.
* **Input:** `button`
* **Output:** ``
**The Class (**`.`) Use a dot, just like in CSS.
* **Input:** `.box` (Defaults to div)
* **Output:** ``
* **Input:** `p.text`
* **Output:** ``
**The ID (**`#`) Use a hash/pound sign.
* **Input:** `#header`
* **Output:** ``
* **Input:** `nav#main-nav`
* **Output:** ``
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769945845157/fa9e3cdb-58ef-404e-adf8-aa06e56914be.png align="center")
### 4\. The Power Moves: Nesting & Multiplication
**Nesting (**`>`) This is where Emmet shines. You can create a parent and a child at the same time using the "Greater Than" symbol.
* **Input:** `div>ul>li`
* **Output:**
```xml
```
**Multiplication (**`*`) Need a list with 5 items? Don't copy-paste. Multiply it.
* **Input:** `li*5`
* **Output:**
```xml
```
**The Combo (Nesting + Multiplication)** Let's go crazy. A list with 3 items inside a nav.
* **Input:** `nav>ul>li*3`
### 5\. Adding Content & Attributes
**Content (**`{}`) You can even add text inside the tag using curly braces.
* **Input:** `h1{Hello World}`
* **Output:** `
Hello World
`
**Attributes (**`[]`) Need a specific link or type? Use square brackets.
* **Input:** `a[href="`[`google.com`](http://google.com)`"]`
* **Output:** ``
* **Input:** `input[type="password"]`
* **Output:** ``
### 6\. Boilerplate (`!`)
This is the first thing every developer does when starting a project. Instead of typing ``, ``, `` manually... Just type:
* **Input:** `!`
* **Action:** Hit Tab.
**Output:**
```xml
Document
```
Boom. Your entire project structure is ready in 1 second.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769946119394/872ac2a0-f37c-4910-907b-fcdef6e76d7b.png align="center")
**Conclusion** Emmet is optional, but so is running, you could just walk everywhere, but it would take forever. Start using these shortcuts today:
1. `!` for setup.
2. `.` for classes.
3. `*` for lists.
Your fingers will thank you
Now you can generate thousands of lines of HTML in seconds. That’s great. But your website still looks like a Word document from 1995. Black text, white background. Boring.
We need to add **CSS** to make it beautiful. But here is the problem: **How do you tell the browser to style *only* the button and not the heading?**
In the next blog, we will learn about **CSS Selectors**