# Emmet for HTML: Write HTML at Lightning Speed
## Introduction
Writing raw HTML can feel painfully slow. You type `
`, close it, add classes, nest elements, and repeat the same patterns again and again. It works, but it’s repetitive and time-consuming.
What if you could write one short line, and instantly get five properly nested list items?
```html
ul>li*5
```
That’s exactly what Emmet does. It turns tiny shortcuts into full HTML structures, saving you tons of typing and effort.
* * *
## What Emmet Is
Emmet is a shortcut language for HTML. You write a short abbreviation, press a key (usually `Tab`), and your code editor expands it into complete HTML. Think of it like autocomplete but with superpowers:
* You type less
* You get more code
* And it’s perfectly formatted
* * *
## How Emmet Works Inside Code Editors
Most modern code editors like VS Code have Emmet built in. The flow is simple:
1. Type an Emmet abbreviation.
2. Press `Tab` (or `Enter`, depending on settings).
3. The editor replaces the abbreviation with full HTML.
You never leave your keyboard, and you don’t manually write opening/closing tags again and again.
* * *
## Creating Elements
### Single Element
Here is the simplest example:
* Emmet Abbreviation:
```html
div
```
* Expanded HTML:
```html
```
You just write the tag name. Emmet writes the full element.
### Multiple Elements
Another example of creating multiple elements quickly is below:
* Emmet Abbreviation:
```html
h1+p
```
* Expanded HTML:
```html
```
The `+` means "next sibling element".
* * *
## Adding Classes, IDs, and Attributes
* You can add Classes, IDs, and attributes by using a CSS selector-like syntax.
### Classes
* Emmet Abbreviation:
```html
div.container
```
* Expanded HTML:
```html
```
### IDs
* Emmet Abbreviation:
```html
section#hero
```
* Expanded HTML:
```html
```
### Attributes
* Emmet Abbreviation:
```html
input[type="text"]
```
* Expanded HTML:
```html
```
### Combined Example
* Emmet Abbreviation:
```html
button.btn.primary[type="submit"]
```
* Expanded HTML:
```html
```
* * *
## Creating Nested Elements
You can use `>` to put one element inside another.
* Emmet Abbreviation:
```html
ul>li
```
* Expanded HTML:
```html
```
Each `>` means "go one level deeper".
* * *
## Repeating Elements Using Multiplication
You can use `*` to repeat elements.
* Emmet Abbreviation:
```html
ul>li*3
```
* Expanded HTML:
```xml
```
* * *
## Generating Full HTML Boilerplate
You can create a complete HTML boilerplate with one word.
* Emmet Abbreviation:
```html
!
```
* Expanded HTML:
```html
Document
```
* * *
## Conclusion
Emmet turns slow, repetitive HTML writing into a fast, almost conversational process. By learning a few simple symbols like `>`, `+`, `.`, `#`, `*` and `!`, you can generate complex structures in seconds.
Start small, use it daily, and soon typing full HTML by hand will feel outdated.