# A Comprehensive Guide to Using Emmet for Faster Coding
In this article we are going to explore the a powerful shortcut methods which help in increasing the development and avoid writing the whole code line.
## Emmet Abbreviation
**Emmet abbreviation** refers to a shorthand syntax used to quickly generate full HTML, XML, CSS, or other structured code with minimal keystrokes. An abbreviation is **a compact expression that Emmet parses and expands into complete code blocks**. For example, `ul>li*3` expands to an unordered list with three list items.
* **Key Symbols**:
* `>` creates child elements.
* `+` creates sibling elements.
* `*` repeats elements (e.g., `li*3` creates three `
` tags).
* `#` adds an ID (e.g., `div#header`).
* `.` adds a class (e.g., `div.container`).
* `{}` adds text content (e.g., `p{Hello World}`).
* `$` inserts the current item number in repeated elements (e.g., `li{$}*3` → `Item 1`, `Item 2`, `Item 3`).
## Emmet Inside the code editor
**Emmet** is a plugin for code editors that allows developers to write HTML and CSS code faster using shorthand syntax. It works by expanding abbreviations into full code structures when you press **Tab**.
* **Basic Workflow**: Type a short abbreviation (e.g., `div.container`) → press **Tab** → expands to ``.
* **Key Symbols**:
* `.` → adds a class (e.g., `p.text` → ``).
* `#` → adds an ID (e.g., `h1#title` → ``).
* `>` → creates a child element (e.g., `div>p` → `
`).
* `+` → creates a sibling element (e.g., `div+p` → ``).
* `*` → repeats elements (e.g., `li*3` → three `
` tags).
## Syntax
| Symbol | Meaning |
| --- | --- |
| `div` | Create element |
| `.` | Class |
| `#` | ID |
| `>` | Child (inside) |
| `+` | Sibling (next to) |
| `*` | Repeat |
| `{}` | Text |
| `!` | HTML boilerplate |
```markdown
## Class
div.container
# ID
section#main
## Class + Id
div#app.container
## Attributes
input[type=text][placeholder=Name]
## Abbreviation
div>p
##Deeper nesting
div>ul>li
## Repeating elements
li*3
## Nested + repeated
ul>li*3
## Repeated with text
p*3{Item}
Item
Item
Item
## Abbreviation
!
Document
```
## Summary
writing HTML and CSS in manual way result in the overload and boring like create same component with different style. Emmet help in increasing the productivity and saves huge amount of time. Instead of writing the whole tag just write the tag name and hit enter magic happened automatically