Emmet for HTML: A Beginner's Guide to Writing Faster Markup

Writing HTML can feel repetitive. Opening tags, closing tags, classes, IDs — it adds up. What if you could type a few characters and have your editor expand them into full HTML? That's exactly what Emmet does.

In this guide, you'll learn how Emmet can transform the way you write HTML — turning seconds of typing into complete markup.

Introduction

Watch how painful writing HTML can be without shortcuts:

<!-- Typing all of this manually... -->
<div class="container">
    <header class="header">
        <nav class="nav">
            <ul class="nav-list">
                <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="#" class="nav-link">About</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
            </ul>
        </nav>
    </header>
</div>

Now imagine typing just this:

.container>header.header>nav.nav>ul.nav-list>(li.nav-item>a.nav-link{Link})*3

And pressing Tab to get all that HTML instantly. That's Emmet.

Prerequisites

Basic understanding of HTML tags and elements
A code editor (VS Code recommended — Emmet is built-in!)

What Is Emmet?

Emmet is a shortcut language for writing HTML (and CSS) faster. It uses abbreviations that expand into full code when you press a trigger key (usually Tab).

Think of Emmet as texting shortcuts for code:

Just like "brb" → "be right back"
Emmet turns div.container → <div class="container"></div>

┌─────────────────────────────────────────────────────────────────┐
│                    What Emmet Does                               │
└─────────────────────────────────────────────────────────────────┘

    You Type                    Emmet Expands To
    ────────                    ────────────────

    div                  →      <div></div>

    p                    →      <p></p>

    ul>li*3              →      <ul>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                </ul>

    .container           →      <div class="container"></div>

    #header              →      <div id="header"></div>

Emmet is built into most modern code editors, including:

VS Code (built-in, no setup needed)
Sublime Text
Atom
WebStorm
Brackets

Why Emmet Is Useful

Before Emmet: The Slow Way

<!-- Typing character by character... -->
<div class="card">
    <img src="" alt="" class="card-image" />
    <div class="card-body">
        <h2 class="card-title"></h2>
        <p class="card-text"></p>
        <a href="#" class="btn">Read More</a>
    </div>
</div>

Time: 30-60 seconds of typing

After Emmet: The Fast Way

.card>img.card-image+.card-body>h2.card-title+p.card-text+a.btn{Read More}

Press Tab. Done.

Time: 5-10 seconds

Benefits of Emmet

Benefit	Description
Speed	Write HTML 5-10x faster
Fewer typos	Less typing = fewer mistakes
Consistency	Always generates valid, properly closed tags
Focus	Think about structure, not syntax

💡 Tip: Emmet is optional but powerful. You don't HAVE to use it, but once you learn it, you'll wonder how you lived without it!

How Emmet Works in Your Editor

In VS Code (Recommended)

Emmet works out of the box in VS Code. No installation needed!

How to use it:

Open or create an .html file
Type an Emmet abbreviation
Press Tab to expand

┌─────────────────────────────────────────────────────────────────┐
│                 Emmet Workflow in VS Code                        │
└─────────────────────────────────────────────────────────────────┘

    Step 1: Type abbreviation          Step 2: Press Tab
    ─────────────────────────          ─────────────────

    ┌─────────────────────────┐        ┌─────────────────────────┐
    │  index.html             │        │  index.html             │
    ├─────────────────────────┤        ├─────────────────────────┤
    │                         │        │                         │
    │  div.container|         │  Tab   │  <div class="container">│
    │       ▲                 │  ───►  │  |                      │
    │       │                 │        │  </div>                 │
    │    cursor               │        │                         │
    └─────────────────────────┘        └─────────────────────────┘

    The cursor (|) is placed inside for you to start typing!

Emmet Suggestion Preview

As you type, VS Code shows a preview of what Emmet will generate:

┌─────────────────────────────────────────────────────────────────┐
│  Emmet Preview                                                   │
└─────────────────────────────────────────────────────────────────┘

    When you type: ul>li*3

    ┌──────────────────────────────────────────┐
    │  ul>li*3                                 │
    │  ┌────────────────────────────────────┐  │
    │  │ Emmet Abbreviation                 │  │
    │  │ <ul>                               │  │
    │  │   <li></li>                        │  │
    │  │   <li></li>                        │  │
    │  │   <li></li>                        │  │
    │  │ </ul>                              │  │
    │  └────────────────────────────────────┘  │
    └──────────────────────────────────────────┘

    Press Tab to accept, or keep typing.

ℹ️ Note: Make sure your file is saved as .html or set the language mode to HTML. Emmet only activates in the right context.

Basic Emmet Syntax

Let's learn the building blocks of Emmet abbreviations.

The Core Operators

Operator	Meaning	Example
(none)	Element	`div` → `<div></div>`
`.`	Class	`div.box` → `<div class="box"></div>`
`#`	ID	`div#main` → `<div id="main"></div>`
`>`	Child	`ul>li` → `<ul><li></li></ul>`
`+`	Sibling	`h1+p` → `<h1></h1><p></p>`
`*`	Multiply	`li*3` → `<li></li><li></li><li></li>`
`{}`	Text	`p{Hello}` → `<p>Hello</p>`
`[]`	Attribute	`a[href=#]` → `<a href="#"></a>`
`()`	Grouping	`(div>p)*2`

Don't worry about memorizing all of these! We'll practice each one.

Creating HTML Elements

The simplest Emmet abbreviation is just the element name.

Basic Elements

You Type	You Get
`div`	`<div></div>`
`p`	`<p></p>`
`span`	`<span></span>`
`h1`	`<h1></h1>`
`a`	`<a href=""></a>`
`img`	`<img src="" alt="">`
`input`	`<input type="text">`
`button`	`<button></button>`

Self-Closing Elements

Emmet knows which elements are self-closing:

You Type	You Get
`img`	`<img src="" alt="">`
`br`	`<br>`
`hr`	`<hr>`
`input`	`<input type="text">`
`link`	`<link rel="stylesheet" href="">`
`meta`	`<meta>`

Notice how img automatically includes src and alt attributes!

Try It Yourself

Open VS Code, create a file called practice.html, and try these:

1. Type: p       → Press Tab → See: <p></p>
2. Type: h2      → Press Tab → See: <h2></h2>
3. Type: section → Press Tab → See: <section></section>
4. Type: img     → Press Tab → See: <img src="" alt="">

Adding Classes and IDs

Classes and IDs are what you'll use most in Emmet.

Adding Classes with `.`

┌─────────────────────────────────────────────────────────────────┐
│                  Adding Classes                                  │
└─────────────────────────────────────────────────────────────────┘

    Abbreviation              Expands To
    ────────────              ──────────

    div.container      →      <div class="container"></div>

    p.intro            →      <p class="intro"></p>

    span.highlight     →      <span class="highlight"></span>

Multiple Classes

Chain classes together with more dots:

    div.card.featured  →      <div class="card featured"></div>

    p.text.large.bold  →      <p class="text large bold"></p>

Adding IDs with `#`

┌─────────────────────────────────────────────────────────────────┐
│                    Adding IDs                                    │
└─────────────────────────────────────────────────────────────────┘

    Abbreviation              Expands To
    ────────────              ──────────

    div#header         →      <div id="header"></div>

    section#about      →      <section id="about"></section>

    nav#main-nav       →      <nav id="main-nav"></nav>

Combining Classes and IDs

You can use both on the same element:

    div#hero.container       →      <div id="hero" class="container"></div>

    section#contact.section  →      <section id="contact" class="section"></section>

Implicit `div`

When you start with . or # without an element, Emmet assumes you want a div:

    .container         →      <div class="container"></div>

    #header            →      <div id="header"></div>

    .card.featured     →      <div class="card featured"></div>

This is a huge time-saver since div is so common!

Try It Yourself

1. Type: .box         → Press Tab
2. Type: #main        → Press Tab
3. Type: .btn.primary → Press Tab
4. Type: nav#navbar   → Press Tab

Adding Attributes

For attributes beyond classes and IDs, use square brackets [].

Basic Attributes

┌─────────────────────────────────────────────────────────────────┐
│                  Adding Attributes                               │
└─────────────────────────────────────────────────────────────────┘

    Abbreviation                    Expands To
    ────────────                    ──────────

    a[href=https://google.com]  →   <a href="https://google.com"></a>

    img[src=photo.jpg]          →   <img src="photo.jpg" alt="">

    input[type=email]           →   <input type="email">

    input[placeholder=Email]    →   <input type="text" placeholder="Email">

Multiple Attributes

Add more attributes inside the brackets:

    a[href=# target=_blank]     →   <a href="#" target="_blank"></a>

    input[type=text name=user]  →   <input type="text" name="user">

Combining Everything

    a.btn.primary[href=/signup]{Sign Up}

    ↓ Expands to ↓

    <a href="/signup" class="btn primary">Sign Up</a>

Creating Nested Elements

The > operator creates child elements (nesting).

Child Operator: `>`

┌─────────────────────────────────────────────────────────────────┐
│                  Nesting with >                                  │
└─────────────────────────────────────────────────────────────────┘

    Abbreviation          Expands To
    ────────────          ──────────

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

    nav>ul>li>a    →      <nav>
                            <ul>
                              <li>
                                <a href=""></a>
                              </li>
                            </ul>
                          </nav>

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

Sibling Operator: `+`

The + operator creates elements at the same level (siblings):

┌─────────────────────────────────────────────────────────────────┐
│                  Siblings with +                                 │
└─────────────────────────────────────────────────────────────────┘

    Abbreviation          Expands To
    ────────────          ──────────

    h1+p           →      <h1></h1>
                          <p></p>

    header+main+footer →  <header></header>
                          <main></main>
                          <footer></footer>

    h2+p+p+p       →      <h2></h2>
                          <p></p>
                          <p></p>
                          <p></p>

Combining `>` and `+`

    div>h1+p       →      <div>
                            <h1></h1>
                            <p></p>
                          </div>

    header>nav>a+a+a  →   <header>
                            <nav>
                              <a href=""></a>
                              <a href=""></a>
                              <a href=""></a>
                            </nav>
                          </header>

Climbing Up with `^`

The ^ operator goes up one level:

    div>p>span^p   →      <div>
                            <p><span></span></p>
                            <p></p>        ← Back up to div level
                          </div>

Try It Yourself

1. Type: header>h1           → Press Tab
2. Type: ul>li>a             → Press Tab
3. Type: h1+p+p              → Press Tab
4. Type: .card>h2+p+a.btn    → Press Tab

Repeating Elements with Multiplication

The * operator repeats elements.

Basic Multiplication

┌─────────────────────────────────────────────────────────────────┐
│                  Multiplication with *                           │
└─────────────────────────────────────────────────────────────────┘

    Abbreviation          Expands To
    ────────────          ──────────

    li*3           →      <li></li>
                          <li></li>
                          <li></li>

    p*5            →      <p></p>
                          <p></p>
                          <p></p>
                          <p></p>
                          <p></p>

    .item*4        →      <div class="item"></div>
                          <div class="item"></div>
                          <div class="item"></div>
                          <div class="item"></div>

With Nesting

    ul>li*5        →      <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                          </ul>

Numbering with `$`

Use $ to add incrementing numbers:

┌─────────────────────────────────────────────────────────────────┐
│               Numbering with $                                   │
└─────────────────────────────────────────────────────────────────┘

    Abbreviation              Expands To
    ────────────              ──────────

    li.item$*3         →      <li class="item1"></li>
                              <li class="item2"></li>
                              <li class="item3"></li>

    h$.title*3         →      <h1 class="title"></h1>
                              <h2 class="title"></h2>
                              <h3 class="title"></h3>

    .img$*3            →      <div class="img1"></div>
                              <div class="img2"></div>
                              <div class="img3"></div>

Padding Numbers

Use multiple $ for zero-padded numbers:

    li.item$$*3        →      <li class="item01"></li>
                              <li class="item02"></li>
                              <li class="item03"></li>

    .slide$$$*3        →      <div class="slide001"></div>
                              <div class="slide002"></div>
                              <div class="slide003"></div>

Grouping with Parentheses

Use () to group elements for multiplication:

┌─────────────────────────────────────────────────────────────────┐
│                  Grouping with ()                                │
└─────────────────────────────────────────────────────────────────┘

    Abbreviation              Expands To
    ────────────              ──────────

    (div>p)*3          →      <div>
                                <p></p>
                              </div>
                              <div>
                                <p></p>
                              </div>
                              <div>
                                <p></p>
                              </div>

    ul>(li>a)*4        →      <ul>
                                <li><a href=""></a></li>
                                <li><a href=""></a></li>
                                <li><a href=""></a></li>
                                <li><a href=""></a></li>
                              </ul>

Try It Yourself

1. Type: li*5              → Press Tab
2. Type: ul>li.item$*4     → Press Tab
3. Type: (div.card>h3+p)*3 → Press Tab

Adding Text Content

Use curly braces {} to add text content.

Basic Text

┌─────────────────────────────────────────────────────────────────┐
│                  Adding Text with {}                             │
└─────────────────────────────────────────────────────────────────┘

    Abbreviation              Expands To
    ────────────              ──────────

    p{Hello World}     →      <p>Hello World</p>

    a{Click Here}      →      <a href="">Click Here</a>

    h1{Welcome}        →      <h1>Welcome</h1>

    button{Submit}     →      <button>Submit</button>

Text with Other Features

Combine text with classes, IDs, and nesting:

    a.btn{Learn More}         →   <a href="" class="btn">Learn More</a>

    h1#title{My Website}      →   <h1 id="title">My Website</h1>

    ul>li*3>{Item}            →   <ul>
                                    <li>Item</li>
                                    <li>Item</li>
                                    <li>Item</li>
                                  </ul>

Numbered Text

Combine $ with text:

    li{Item $}*3       →      <li>Item 1</li>
                              <li>Item 2</li>
                              <li>Item 3</li>

    p{Paragraph $}*4   →      <p>Paragraph 1</p>
                              <p>Paragraph 2</p>
                              <p>Paragraph 3</p>
                              <p>Paragraph 4</p>

The HTML Boilerplate Shortcut

This is one of the most useful Emmet shortcuts!

The Magic `!`

Type ! and press Tab to get a complete HTML5 boilerplate:

<!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>

One character. Full HTML structure. 🎉

Alternative: `html:5`

html:5   →   (same output as !)

Abbreviation	Result
`!` or `html:5`	HTML5 document
`html:xml`	XHTML document
`!!!`	Just `<!DOCTYPE html>`

Daily-Use Emmet Patterns

Here are the patterns you'll use every day:

nav>ul>li*5>a{Link $}

↓ Expands to ↓

<nav>
  <ul>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
    <li><a href="">Link 4</a></li>
    <li><a href="">Link 5</a></li>
  </ul>
</nav>

Cards

.card>img.card-img+.card-body>(h3.card-title+p.card-text+a.btn{Read More})

↓ Expands to ↓

<div class="card">
  <img src="" alt="" class="card-img">
  <div class="card-body">
    <h3 class="card-title"></h3>
    <p class="card-text"></p>
    <a href="" class="btn">Read More</a>
  </div>
</div>

Forms

form>input[type=text placeholder=Name]+input[type=email placeholder=Email]+button{Submit}

↓ Expands to ↓

<form action="">
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
  <button>Submit</button>
</form>

Page Structure

header>nav+main>section*3>h2+p^footer

↓ Expands to ↓

<header>
  <nav></nav>
</header>
<main>
  <section>
    <h2></h2>
    <p></p>
  </section>
  <section>
    <h2></h2>
    <p></p>
  </section>
  <section>
    <h2></h2>
    <p></p>
  </section>
</main>
<footer></footer>

Quick Reference Cheat Sheet

┌─────────────────────────────────────────────────────────────────┐
│                  Emmet Quick Reference                           │
└─────────────────────────────────────────────────────────────────┘

    ELEMENTS
    div, p, span, h1, a, img, ul, li, form, input, button

    CLASSES & IDs
    .classname          →   <div class="classname"></div>
    #idname             →   <div id="idname"></div>
    div.one.two         →   <div class="one two"></div>

    NESTING
    parent>child        →   <parent><child></child></parent>
    sibling1+sibling2   →   <sibling1></sibling1><sibling2></sibling2>

    MULTIPLICATION
    element*5           →   5 copies of element
    li.item$*3          →   <li class="item1"> (numbered)

    GROUPING
    (div>p)*3           →   3 copies of (div containing p)

    TEXT
    p{Hello}            →   <p>Hello</p>

    ATTRIBUTES
    a[href=# target=_blank]

    BOILERPLATE
    !                   →   Complete HTML5 document

Best Practices

Start small — Learn one operator at a time
Practice daily — Use Emmet every time you write HTML
Don't memorize — Use it enough and it becomes muscle memory
Keep abbreviations readable — ul>li*5 is clear; don't go overboard with complexity
Remember: optional but powerful — It's okay to type HTML manually sometimes

Common Mistakes to Avoid

Forgetting to press Tab
- Emmet only works when you trigger it!
Wrong file type
- Emmet only activates in HTML/CSS files
- Check your editor's language mode

Over-complicating abbreviations

 <!-- Too complex — hard to read -->
 .container>header.header>.nav>ul.nav-list>(li.nav-item>a.nav-link{Link $})*5+.logo

 <!-- Better — break it up -->
 .container>header.header
 (then expand and add more)

Forgetting the implicit div

 <!-- These are the same -->
 div.box   →   <div class="box"></div>
 .box      →   <div class="box"></div>

Conclusion

Emmet is a productivity superpower for HTML. Here's what we learned:

Element names expand into tags (div → <div></div>)
. adds classes, # adds IDs
> creates children (nesting)
+ creates siblings
* repeats elements
{} adds text content
[] adds attributes
! generates a complete HTML5 boilerplate

You don't have to memorize everything. Start with the basics:

! for boilerplate
.classname for divs with classes
ul>li*5 for lists
div>p for nesting

Use these every day, and the rest will follow naturally!

Next Steps / Further Reading

Try Emmet for CSS (it works there too!)
Explore VS Code Emmet settings and customizations
Practice with real projects — every page is an opportunity
Check out the official Emmet documentation

If you found this helpful, consider following for more web development tips and tutorials.

Command Palette

Emmet for HTML: A Beginner's Guide to Writing Faster Markup

Introduction

Prerequisites

What Is Emmet?

Why Emmet Is Useful

Before Emmet: The Slow Way

After Emmet: The Fast Way

Benefits of Emmet

How Emmet Works in Your Editor

In VS Code (Recommended)

Emmet Suggestion Preview

Basic Emmet Syntax

The Core Operators

Creating HTML Elements

Basic Elements

Self-Closing Elements

Try It Yourself

Adding Classes and IDs

Adding Classes with .

Multiple Classes

Adding IDs with #

Combining Classes and IDs

Implicit div

Try It Yourself

Adding Attributes

Basic Attributes

Multiple Attributes

Combining Everything

Creating Nested Elements

Child Operator: >

Sibling Operator: +

Combining > and +

Climbing Up with ^

Try It Yourself

Repeating Elements with Multiplication

Basic Multiplication

With Nesting

Numbering with $

Padding Numbers

Grouping with Parentheses

Try It Yourself

Adding Text Content

Basic Text

Text with Other Features

Numbered Text

The HTML Boilerplate Shortcut

The Magic !

Alternative: html:5

Other Document Types

Daily-Use Emmet Patterns

Navigation

Cards

Forms

Page Structure

Quick Reference Cheat Sheet

Best Practices

Common Mistakes to Avoid

Conclusion

Next Steps / Further Reading

Comments

Web Dev Cohort 2026

Understanding Network Devices: A Developer's Guide to Internet Infrastructure

More from this blog

Adding Classes with `.`

Adding IDs with `#`

Implicit `div`

Child Operator: `>`

Sibling Operator: `+`

Combining `>` and `+`

Climbing Up with `^`

Numbering with `$`

The Magic `!`

Alternative: `html:5`