# Emmet for HTML
## **The Problem: Writing HTML Is Slow**
Type this by hand:
```xml
Welcome
This is a paragraph.
```
That's a lot of typing. Opening tags, closing tags, attributes, indentation. Every single character.
Now imagine building a full webpage with dozens or hundreds of elements. It gets tedious fast.
**There has to be a better way.**
## **What Is Emmet?**
**Emmet** is a shortcut language that lets you write HTML incredibly fast.
Instead of typing full HTML tags, you type a short abbreviation and press Tab. Emmet expands it into complete HTML.
**Example:**
Type this:
```bash
div.container
```
Press **Tab**
Get this:
```xml
```
Emmet isn't a separate tool you install. It's built into most modern code editors like VS Code, Sublime Text, and Atom. It just works.
## **Why Beginners Should Use Emmet**
**1\. Write HTML 10x faster** Less typing means you focus on structure, not syntax.
**2\. Fewer mistakes** Emmet generates valid HTML. No forgotten closing tags or typos.
**3\. Learn HTML structure better** Emmet forces you to think in terms of hierarchy and nesting.
**4\. Industry standard** Professional developers use Emmet daily. Learning it early gives you good habits.
**5\. It's optional** You can always type HTML manually. Emmet is there when you want speed.
## **How Emmet Works**
Emmet watches what you type in your editor. When it recognizes an abbreviation, it offers to expand it.
**Step-by-step:**
1. Type an Emmet abbreviation: `p`
2. Press **Tab** (or Enter in some editors)
3. Emmet expands it: ``
4. Your cursor is inside the tag, ready to add content
**Most editors with Emmet support:**
* VS Code (built-in)
* Sublime Text (built-in)
* Atom (built-in)
* WebStorm (built-in)
If you're using VS Code, Emmet works out of the box. Just type and press Tab.
## **Basic Emmet Syntax**
### **Creating Elements**
Type the tag name and press Tab.
```xml
h1 →
p →
div →
span →
```
### **Adding Classes**
Use a dot (`.`) for classes.
```xml
div.container →
p.intro →
```
**Multiple classes:**
```xml
div.card.shadow →
```
### **Adding IDs**
Use a hash (`#`) for IDs.
```php-template
div#main →
header#top →
```
### **Combining Classes and IDs**
```xml
div#main.container →
```
**Order doesn't matter:**
```xml
div.container#main →
```
### **Implicit Tag Names**
If you don't specify a tag, Emmet assumes `div`.
```xml
.container →
#header →
.card.shadow →
```
## **Adding Attributes**
Use square brackets `[]` for custom attributes.
```xml
a[href="#"] →
img[src="photo.jpg"] →
input[type="text"] →
```
**Multiple attributes:**
```xml
img[src="car.jpg" alt="Red car"] →
```
## **Creating Nested Elements**
Use the `>` symbol to create child elements.
```xml
div>p →
```
**More complex nesting:**
```xml
header>h1
```
Expands to:
```xml
```
**Deeper nesting:**
```bash
div>header>h1
```
Expands to:
```xml
```
## **Sibling Elements**
Use the `+` symbol to create elements at the same level.
```bash
header+main
```
Expands to:
```xml
```
**Multiple siblings:**
```bash
header+main+footer
```
Expands to:
```xml
```
## **Combining Nesting and Siblings**
```bash
div>header+main+footer
```
Expands to:
```xml
```
**More complex:**
```bash
div.container>header>h1^main>p^footer
```
The `^` climbs back up one level.
Expands to:
```xml
```
## **Repeating Elements with Multiplication**
Use `*` to create multiple copies.
```bash
li*3
```
Expands to:
```xml
```
**Real-world example:**
```bash
ul>li*5
```
Expands to:
```xml
```
**With classes:**
```bash
div.card*3
```
Expands to:
```xml
```
## **Auto-Numbering with $**
Use `$` to add auto-incrementing numbers.
```bash
div.item$*3
```
Expands to:
```xml
```
**In IDs:**
```bash
section#section$*3
```
Expands to:
```xml
```
## **Adding Text Content**
Use curly braces `{}` for text.
```bash
h1{Welcome}
```
Expands to:
```xml
Welcome
```
**With nested elements:**
```bash
div>h1{Title}+p{Description}
```
Expands to:
```xml
Title
Description
```
**Numbered text:**
```bash
li{Item $}*3
```
Expands to:
```xml
Item 1
Item 2
Item 3
```
## **Generating HTML Boilerplate**
The most powerful Emmet trick: generate a full HTML template instantly.
Type:
```bash
!
```
Press **Tab**
Get this:
```xml
Document
```
**This saves you from typing 10+ lines every time you create a new HTML file.**
Alternative syntax (does the same thing):
```bash
html:5
```
## **Real-World Examples**
### **Navigation Menu**
```bash
nav>ul>li*4>a
```
Expands to:
```xml
```
### **Card Grid**
```bash
div.grid>div.card*3>h2+p
```
Expands to:
```xml
```
### **Form**
```bash
form>input[type="text"]+input[type="email"]+button{Submit}
```
Expands to:
```xml
```
### **Table**
```bash
table>tr*3>td*4
```
Expands to:
```xml
` |
| `!` | Full HTML template |
---
## For Cheat Sheet You can visit here : [Official Documentation](https://docs.emmet.io/cheat-sheet/)
### **Want More…?**
I write articles on [**blog.prakashtsx.com**](https://blog.prakashtsx.me/) and also post development-related content on the following platforms:
* [**Twitter/X**](https://x.com/prakashtsx)
* [**LinkedIn**](https://www.linkedin.com/in/prakashtsx)
input[type="text"] →
```
**Multiple attributes:**
```xml
img[src="car.jpg" alt="Red car"] → 
```
## **Creating Nested Elements**
Use the `>` symbol to create child elements.
```xml
div>p →