# Emmet for HTML: Write Markup Faster Without Typing Every Tag

Let’s say you want a simple list of three items. Without any shortcuts, you’d type this:

```html
<ul>
  <li></li>  
  <li></li>  
  <li></li>
</ul>
```

That’s a lot of angle brackets, slashes, and closing tags for something so small. Now imagine a whole page. Your fingers get tired, and typos sneak in.

What if you could type `ul>li*3`, press Tab, and get that entire list instantly? That’s **Emmet**, and it’s already built into most code editors.

### What is Emmet?

Emmet is a **shortcut language for HTML**. You type a short abbreviation, press a key, and your editor expands it into full HTML.

Think of it like text-message shortcuts: you type “brb” and everyone knows it means “be right back.” Emmet works the same way, except your editor does the expanding for you.

### Why is Emmet Useful for Beginners?

1. **You type less.** Less typing means less tiredness and fewer mistakes.
2. **No forgotten closing tags.** Emmet always writes the full pair for you.
3. **You learn structure faster.** Writing `ul>li` makes the parent-child relationship obvious.
4. **It’s the habit of almost every working developer.** You’ll see it in tutorials all the time.

And remember, Emmet is **optional**. You can write HTML without it, but once you try it, it’s hard to go back.

### How Emmet Works Inside Code Editors

Emmet comes built into **VS Code**, which is the editor. Many other editors support it too, either built in or through a plugin.

The workflow is simple:

1. Type an abbreviation.
2. Press **Tab** (or Enter, if a suggestion pops up).
3. Your editor replaces it with real HTML.

![](https://cdn.hashnode.com/uploads/covers/6aa385803606a7bd7c205588/bbfd4431-87b0-4e38-8173-0c60d7b1cfe1.png align="center")

Each example below follows the same pattern :

**Emmet abbreviation → expanded HTML.**

Try each one yourself in an `.html` file as you read.

### Creating HTML Elements

Just type the tag name and press Tab.

```plaintext
p
```

becomes

```html
<p></p>
```

```plaintext
h1
```

becomes

```html
<h1></h1>
```

To add text inside, use curly braces:

```plaintext
h1{Hello World}
```

becomes

```html
<h1>Hello World</h1>
```

### Adding Classes and IDs

Use a dot `.` for a class and a hash `#` for an ID.

```plaintext
p.intro
```

becomes

```html
<p class="intro"></p>
```

```plaintext
div#main
```

becomes

```html
<div id="main"></div>
```

You can combine them:

```plaintext
section#hero.dark
```

becomes

```html
<section id="hero" class="dark"></section>
```

Here’s a nice shortcut: if you skip the tag name, Emmet assumes `div`.

```plaintext
.container
```

becomes

```html
<div class="container"></div>
```

### Adding Attributes

Use square brackets `[ ]`.

```plaintext
a[href="https://hashnode.com"]
```

becomes

```html
<a href="https://hashnode.com"></a>
```

```plaintext
img[src="photo.jpg" alt="Sunset"]
```

becomes

```html
<img src="photo.jpg" alt="Sunset">
```

Separate multiple attributes with a space.

### Creating Nested Elements

Use the **greater-than sign** `>` to put one element **inside** another (parent > child).

```plaintext
div>p
```

becomes

```html
<div>
  <p></p>
</div>
```

You can go deeper:

```plaintext
ul>li>a
```

becomes

```html
<ul>
  <li><a href=""></a></li>
</ul>
```

Use the **plus sign** `+` to place elements **next to each other** (siblings).

```plaintext
h1+p
```

becomes

```html
<h1></h1>
<p></p>
```

Now you can combine them:

```plaintext
div.card>h2+p
```

becomes

```html
<div class="card">
  <h2></h2>  
  <p></p>
</div>
```

### Repeating Elements With Multiplication

Use the **star** `*` to repeat an element, just like multiplying.

```plaintext
li*3
```

becomes

```html
<li></li>
<li></li>
<li></li>
```

Combine it with nesting, and that’s the magic from the start of this blog:

```plaintext
ul>li*3
```

becomes

```html
<ul>
  <li></li>  
  <li></li>  
  <li></li>
</ul>
```

Want numbered classes? Add a dollar sign `$`, which counts up for you:

```plaintext
li.item$*3
```

becomes

```html
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
```

### Generating the Full HTML Boilerplate

Every webpage starts with the same skeleton. Instead of typing it from memory, type just this in an empty HTML file:

```plaintext
!
```

Press Tab, and VS Code gives you:

```html
<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="UTF-8">  
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
	  <title>Document</title>
	</head>
	<body></body>
</html>
```

An entire page skeleton from one character. (You can also type `html:5` and press Tab for the same result.)

### Quick Cheat Sheet

1. `tag` makes an element
2. `.name` makes a class
3. `#name` makes an ID
4. `[attr="value"]` adds attributes
5. `{text}` adds text
6. `>` nests inside
7. `+` creates a sibling
8. `3` repeats
9. `!` makes the boilerplate

### Wrapping Up

Emmet is a shortcut language that turns tiny abbreviations into full HTML. Learn the nine patterns in the cheat sheet and you’ll cover almost everything you’ll need day to day. It’s optional, but it’ll save you thousands of keystrokes.