# Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
In Visual Studio Code (VS Code), we have Emmet. Emmet is a plugin that helps us write code faster by providing useful shorthand notation for writing repetitive things in HTML and CSS.
## Why Emmet is useful for HTML beginners
In HTML, we code around multiple tags. Writing these tags 1000 times, we can use Emmet Abstraction, which make coder fast.
example
```bash
div # we just type this and hit -enter
# emmet autocomplete this tags for us
```
## Why Emmet is useful for HTML beginners
For a beginner who is trying to learn the core concept of HTML and it’s working, emmit helps there to reduce the pressure of remembering all the syntax.
### Emmet helps you:
* Write HTML **10x faster**
* Avoid spelling mistakes in tags
* Generate nested structures easily
* Create repeated elements in seconds
* Build boilerplate HTML instantly
## How Emmet works inside code editors
Emmet comes built-in inside most editors, especially:
### How you use it
1. Open an HTML file (example: `index.html`)
2. Type an Emmet abbreviation
3. Press:
* Hit `Tab`
* or `Enter`
Type:
```bash
h1
```
Press Enter, and it becomes:
```bash
```
## Useful Syntax of Emmet
Emmet uses symbols like shortcuts.
Here are the **most useful ones**:
| Symbol | Meaning |
| --- | --- |
| `>` | child (inside) |
| `+` | sibling (next to) |
| `*` | multiply/repeat |
| `.` | class |
| `#` | id |
| `[]` | attributes |
## Creating HTML elements using Emmet
### Example 1: Simple element
**Emmet:**
```bash
p
```
**HTML output:**
```bash
```
### Example 2: Element with inner text
**Emmet:**
```bash
p{Hello world}
```
Output:
```bash
Hello world
```
## Adding classes, IDs, and attributes
### Adding a class (`.`)
Use tagname, then a single \[dot\] and classname
**Emmet:**
```bash
div.card
```
Output:
```bash
```
Even shorter:
**Emmet:**
```bash
.card
```
Output:
```bash
```
(because Emmet assumes `div` by default)
### Adding an ID (`#`)
Use tagname then, Pound Simble ( # ) followed by Id
**Emmet:**
```bash
div#main
```
Output:
```bash
```
### Class + ID together
**Emmet:**
```bash
section#hero.banner
```
Output:
```bash
```
### Adding attributes (`[]`)
Example link tag:
**Emmet:**
```bash
a[href="https://google.com"]
```
Output:
```bash
```
Example image:
**Emmet:**
```bash
img[src="photo.jpg" alt="my image"]
```
Output:
```bash
```
Notice: `img` has no closing tag (Emmet knows that).
## Creating nested elements
Nesting means element inside element.
Emmet uses:
`>`
### Example: Nav with list
**Emmet:**
```bash
nav>ul>li
```
Output:
```bash
```
### Example: Card layout
**Emmet:**
```bash
div.card>h2+p
```
Output:
```bash
```
## Creating siblings
Emmet uses:
`+`
### Example:
**Emmet:**
```bash
h1+p
```
Output:
```bash
```
### Example:
**Emmet:**
```bash
header+main+footer
```
Output:
```bash
```
## Repeating elements using multiplication (`*`)
This is used to save a lot of time
### Example: 5 list items
**Emmet:**
```bash
ul>li*5
```
Output:
```bash
```
## Combining nesting + multiplication
Note: This syntax is useful, but it's easy to forgot these syntax if you don’t practice and use it in your daily coding workflow, so always try to practice it. Also, keep in mind these are helpful for faster code writing, but if you can’t remember any of them, then it is totally fine.
### Example: Menu list
**Emmet:**
```bash
nav>ul>li*4>a[href="#"]
```
Output:
```bash
```
Now add text:
**Emmet:**
```bash
nav>ul>li*4>a[href="#"]{Menu}
```
Output:
```bash
```
## Generating a full HTML boilerplate with Emmet
This is the most famous Emmet shortcut.
### HTML Boilerplate
Just type:
**Emmet:**
```bash
! # then hit enter
```
Press Tab → You get:
```bash
Document
```
## Conclusion:
Keep in mind that Emmet is a tool that helps coders to ship faster, but it is totally optional. If you just see the command and not practice them, then you definitely forgot every shotcut emmet provides you, so just use this article for reference purposes and do this trick in vs code for build your own muscle memory.
```
Notice: `img` has no closing tag (Emmet knows that).
## Creating nested elements
Nesting means element inside element.
Emmet uses:
`>`
### Example: Nav with list
**Emmet:**
```bash
nav>ul>li
```
Output:
```bash
```
### Example: Card layout
**Emmet:**
```bash
div.card>h2+p
```
Output:
```bash