Emmet for HTML – Write HTML 5x Faster with Shortcuts

If you’ve just started learning HTML, you’ve probably felt this:

“Why am I typing <div>...</div> again and again?
Isn’t there a faster way?”

There is. It’s called Emmet.

In this blog we’ll look at Emmet in very simple, beginner‑friendly terms and see how it helps you write HTML much faster, without learning anything “magical”.

You’ll learn:

• What Emmet is

• Why it’s useful especially when you’re new to HTML

• How it works inside code editors (like VS Code)

• The basic Emmet syntax

• How to create elements, classes, IDs, attributes

• How to create nested and repeated elements

• How to generate a full HTML boilerplate with a single character

---

What is Emmet?

Emmet is basically a shortcut language for HTML (and CSS).

Instead of typing this:

<div class="card">
  <h2>Title</h2>
  <p>Description</p>
</div>

you type this:

div.card>h2+p

and your editor expands it into full HTML for you.

So you can think of Emmet as:

“Small shortcuts that your editor understands and turns into full code.”

It doesn’t change HTML.
It just helps you write HTML faster.

---

Why Emmet is useful for HTML beginners

When you’re starting with HTML:

• You know you need <div>, <p>, <h1>, etc.

• But typing the full opening and closing tags every time feels slow.

• You make silly typos like <dib> or forget a </p>.

Emmet helps by:

• Reducing typing

• Reducing mistakes

• Letting you focus on structure, not on < and >

You can absolutely write HTML without Emmet.
But once you get used to it, it feels painful to go back.

---

How Emmet works in a code editor

Most modern code editors have Emmet support built‑in.
For example:

• VS Code – Emmet is enabled by default in HTML / JSX files.

• Other editors (WebStorm, Sublime, etc.) either ship with it or support it via extensions.

The actual workflow is usually:

1. You type an abbreviation (like p>Hello or ul>li*3)

2. You press a special key (most commonly Tab or Enter, depending on settings)

3. The editor expands it into full HTML

So Emmet lives inside your editor, not inside the browser.

Tip: If you’re not sure it’s working, create a new index.html in VS Code, type ! and press Tab/Enter. If it expands to a full HTML template, Emmet is enabled.

---

Basic Emmet syntax: start with elements

Let’s start very small.

Single element

Type:

p

then press Tab/Enter.

Emmet expands it to:

<p></p>

Same for:

h1     →  <h1></h1>
div    →  <div></div>
span   →  <span></span>

Even this alone saves time because you don’t have to type both opening and closing tags.

Adding text content

You can also add content using {}.

p{Hello Emmet}

expands to:

<p>Hello Emmet</p>

This is great when you want to quickly scaffold example content.

---

Adding classes, IDs, and attributes

Emmet reuses ideas you already know from CSS selectors.

Classes with .

div.card

expands to:

<div class="card"></div>

More classes?

p.note.important

→

<p class="note important"></p>

IDs with #

section#hero

→

<section id="hero"></section>

You can also combine ID and class:

div#header.navbar

→

<div id="header" class="navbar"></div>

Attributes with []

a[href="https://chaicode.com"]

→

<a href="https://chaicode.com"></a>

Another one:

input[type="text" placeholder="Your name"]

→

<input type="text" placeholder="Your name">

So the quick mapping is:

• . → class

• # → id

• [] → any attribute

Exactly like writing CSS selectors, but used to generate HTML.

---

Creating nested elements

One of the best parts of Emmet is how easy nesting becomes.

Child elements with >

div>p

→

<div>
  <p></p>
</div>

More levels:

div.card>h2+p

→

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

Read it like a sentence:

• Create a div.card

• Inside it (>) create an h2 and a p

Another example:

nav>ul>li

→

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

Siblings with +

h1+p

→

<h1></h1>
<p></p>

Not nested. Just next to each other.

You can mix children and siblings:

header>h1+nav

→

<header>
  <h1></h1>
  <nav></nav>
</header>

---

Repeating elements with *

Typing 5 list items manually is boring:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

With Emmet:

ul>li*5

→

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

You can also add numbering with $:

ul>li.item$*3

→

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

This is extremely useful for quickly mocking menus, cards, or repeated layout blocks.

---

Generating a full HTML boilerplate with !

The most famous Emmet shortcut is probably this one:

!

Press Tab/Enter in an empty HTML file, and it expands to something like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

That’s your entire basic HTML skeleton generated from a single character.

Perfect when you start a new project or practice file.

---

Putting it together – a realistic example

Let’s say you want to quickly create a card component:

<div class="card">
  <h2>Card Title</h2>
  <p>Some description here.</p>
  <a href="https://chaicode.com">Visit Chaicode</a>
</div>

With Emmet, you can type:

div.card>h2{Card Title}+p{Some description here.}+a[href="https://chaicode.com"]{Visit Chaicode}

Hit Tab/Enter and the full structure appears.

At first this might look long, but:

• You avoid typing closing tags

• You avoid moving the cursor around

• You see the whole structure in one line before expanding

---

Emmet is powerful, but optional

A few important points to end with:

• You can build entire websites without Emmet.

• Emmet doesn’t change how HTML works. It just writes it for you faster.

• Don’t stress about learning every Emmet trick.
  Focus on the daily‑use patterns we covered:

  • Single tags: p, div, h1

  • Classes/IDs: .class, #id

  • Attributes: [href="/"], [type="text"]

  • Nesting: > and +

  • Repeating: *

  • Boilerplate: !

The best way to learn is:

1. Open VS Code (or your editor)

2. Create a new index.html

3. Try each abbreviation from this blog yourself

4. Watch it expand and tweak it

After a few days, you’ll catch yourself thinking in Emmet automatically.

---

Once you’re comfortable with plain HTML, Emmet becomes one of those small tools that makes everyday coding feel much smoother.