# Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
Topics to cover in this blog.
* What Emmet is (in very simple terms)?
* Why Emmet is useful for HTML beginners?
* How Emmet works inside code editors?
* Basic Emmet syntax and abbreviations
* Creating HTML elements using Emmet
* Adding classes, IDs, and attributes
* Creating nested elements
* Repeating elements using multiplication
* Generating full HTML boilerplate with Emmet
---
## What Emmet is?
Emmet is a shortcut language for HTML. Instead of writing full HTML code, you write a short abbreviation, press Tab, and your editor expands it into proper HTML.
---
## Where can you use Emmet and how emment works inside code editors?
Emmet works inside most modern code editors:
* VS Code
* Sublime Text
* Atom
You don’t need a specific editor to learn Emmet. The concepts stay the same everywhere.How it works:
1. You type an Emmet abbreviation
2. Press **Tab**
3. The editor converts it into proper HTML code
That’s it. No magic setup needed.
---
## Basic Emmet syntax and abbreviations
Emmet uses symbols that represent HTML structure
```plaintext
Symbol Meaning
`>` Child element
`+` Sibling element
`*` Repeat element
`.` Class
`#` ID
`[]` Attributes
```
---
## Creating HTML elements using Emmet
To create an HTML element, just type the tag name.
```plaintext
p
```
Enter `Tab`, if become
```plaintext
```
---
## Adding classes, IDs, and attributes
Adding a class
```plaintext
div.container
```
Output:
```plaintext
```
Adding an ID
```plaintext
section#about
```
Output:
```plaintext
```
---
## Creating nested elements
To create elements **inside** another element, use `>`
```plaintext
div>p
```
Output:
```plaintext
```
---
## Repeating elements using multiplication
If you want multiple same elements, use `*`
```plaintext
li*3
```
Output:
```plaintext
```
With nesting:
```plaintext
ul>li*3
```
Output:
```plaintext
```
---
## Generating full HTML boilerplate with Emmet
Just type:
```plaintext
!
```
Press `Tab`
```xml
Document
```
---
## Conclusion
If you are learning HTML, **Emmet is not optional it’s a superpower**. Start small, practice basic abbreviations, and slowly you’ll write HTML faster than you ever imagined.