`.
---
## Adding Classes, IDs, and Attributes
You can combine symbols to add classes, IDs, and attributes without writing them manually:
* `.btn.primary` → ``
* `a[href="`[`https://example.com`](https://example.com)`"]` → ``](https://example.com">)
This removes the need for repetitive typing when adding attributes.
---
## Creating Nested Structures
Using **child (**`>`) and **sibling (**`+`) operators, you can quickly build complex hierarchies:
* **Nested:**
`header>nav>ul>li*4` expands into a navigation list with four items.
* **Siblings:**
`h1+p+a` → creates ``, a `
`, and an `` all at the same level.
---
## Repeating Elements Using Multiplication
Want multiple copies of the same element?
Example:
```javascript
li*5
```
→ generates five `` elements.
You can even use `$` to insert numbering:
```javascript
li.item$*3
```
→ produces `item1`, `item2`, `item3` respectively inside the repeated elements.
---
## Generating Full HTML Boilerplate
One of the biggest time savers is generating a complete HTML5 structure instantly:
* `!` or
* `html:5`
When you type either of these in a blank HTML file and hit **Tab**, Emmet will generate the complete `` and `…` boilerplate for you.
---
## Suggestions for Beginners
* Try Emmet **one concept at a time** — start with single elements, then move to nested structures.
* Compare the **Emmet abbreviation** vs. the **expanded HTML** side-by-side.
* Practice using it in an editor like **VS Code**, which has Emmet built in by default.
* Emmet is **optional** — it’s meant to help you *write markup faster*, but you can still create HTML without it.
---
## Summary
Emmet is a **powerful shorthand toolkit** that lets you expand **simple abbreviations into full HTML structures quickly**, making HTML coding faster and less repetitive. It’s widely supported across editors, requires minimal setup, and uses a CSS-like syntax that feels intuitive if you’re already familiar with HTML or CSS.