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

Writing HTML by hand is tedious. Every element needs an opening tag, a closing tag, and proper nesting. A simple list takes a lot of keystrokes:

html

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

That's 37 characters for an empty list. Now imagine building a navigation menu, a form with multiple inputs, or a card layout. You'll spend more time typing angle brackets than thinking about structure.

There's a faster way.

What is Emmet?

Emmet is a shortcut system built into most code editors. You type a short abbreviation, press Tab (or Enter), and Emmet expands it into full HTML.

Instead of typing this:

html

<div class="container">
  <h1>h1>
  <p>p>
div>
```

You type this:
```
div.container>h1+p

Press Tab. Emmet expands it instantly.

mermaid

flowchart LR
    A["div.container>h1+p"] -->|"Press Tab"| B["Full HTML\nstructure"]

Emmet isn't a separate tool you install — it's already inside VS Code, Sublime Text, Atom, WebStorm, and most modern editors. Just start typing and expanding.

Why Learn Emmet?

Speed — Generate complex structures in seconds.

Fewer typos — Emmet handles the syntax; you handle the logic.

Less tedium — Stop typing closing tags manually.

Muscle memory — Once learned, it becomes automatic.

Emmet is optional. You can write HTML without it forever. But once you experience the speed boost, you won't want to go back.

Basic Syntax: Creating Elements

Type an element name and press Tab.

div → <div></div> 

p → <p></p> 

h1 → <h1></h1> 

span → <span></span>

ul → <ul></ul>

That's it. Element name → Tab → HTML.

Adding Classes and IDs

Classes use a dot (.). IDs use a hash (#).

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

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

h1#title → <h1 id="title"></h1> 

button.btn.primary → <button class="btn primary"></button> 

div#main.wrapper → <div id="main" class="wrapper"></div>

Multiple classes? Chain them: .class1.class2.class3

Class and ID together? Combine them: #id.class

The div Shortcut

Since <div> is so common, Emmet lets you skip typing it. If you start with a class or ID, Emmet assumes you mean a div.

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

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

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

Less typing for the most common element.

Adding Attributes

Use square brackets for custom attributes.
a[href=#] → <a href="#"></a> 

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

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

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

Multiple attributes go inside the same brackets, separated by spaces.

Nesting: Child Elements with >

The > symbol creates a parent-child relationship.

You type: div>p

Emmet generates:

<div>
  <p>p>
div>

You type: ul>li

Emmet generates:

<ul>
  <li>li>
ul>

You type: nav>ul>li>a

Emmet generates:

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

The > means "inside" — each element nests inside the previous one.

Siblings: Adjacent Elements with +

The + symbol creates sibling elements — elements at the same level.

You type: h1+p

Emmet generates:

<h1>h1>
<p>p>

You type: header+main+footer

Emmet generates:

<header>header>
<main>main>
<footer>footer>

Combining nesting and siblings:

You type: div>h1+p+p

Emmet generates:

<div>
  <h1>h1>
  <p>p>
  <p>p>
div>

The h1 and both p elements are siblings inside the div.

Multiplication: Repeating Elements with *

The * symbol repeats an element.

You type: li*5

Emmet generates:

<li>li>
<li>li>
<li>li>
<li>li>
<li>li>

Combine with nesting:

You type: ul>li*3

Emmet generates:

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

With classes:

You type: ul>li.item*4

Emmet generates:

<ul>
  <li class="item">li>
  <li class="item">li>
  <li class="item">li>
  <li class="item">li>
ul>

Grouping with Parentheses

Parentheses let you group elements together, then continue at the parent level.

You type: div>(header>h1)+main+footer

Emmet generates:

<div>
  <header>
    <h1>h1>
  header>
  <main>main>
  <footer>footer>
div>

Without parentheses, the nesting would continue differently. Grouping gives you control over the structure.

Adding Text with {}

Curly braces add text content inside an element.

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

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

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

Combine with other features:

You type: ul>li{Item}*3

Emmet generates:

<ul>
  <li>Itemli>
  <li>Itemli>
  <li>Itemli>
ul>

Numbering with $

When multiplying elements, $ inserts an incrementing number.

You type: ul>li.item${Item $}*3

Emmet generates:

<ul>
  <li class="item1">Item 1li>
  <li class="item2">Item 2li>
  <li class="item3">Item 3li>
ul>

The $ becomes 1, 2, 3 as it repeats.

Padding with zeros:

You type: li.item$$*3

Emmet generates:

<li class="item01">li>
<li class="item02">li>
<li class="item03">li>

Use $$ for 01, 02, 03. Use $$$ for 001, 002, 003.

The HTML Boilerplate: !

The single most useful Emmet shortcut. Type ! and press Tab.

You type: !

Emmet generates:

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

A complete HTML5 boilerplate in one keystroke. This alone makes Emmet worth learning.

Real-World Examples

Navigation menu:

You type: nav>ul>li*4>a{Link}

Emmet generates:

<nav>
  <ul>
    <li><a href="">Linka>li>
    <li><a href="">Linka>li>
    <li><a href="">Linka>li>
    <li><a href="">Linka>li>
  ul>
nav>

Card component:

You type: .card>img+.card-body>(h3{Title}+p{Description}+a.btn{Read more})

Emmet generates:

<div class="card">
  <img src="" alt="">
  <div class="card-body">
    <h3>Titleh3>
    <p>Descriptionp>
    <a href="" class="btn">Read morea>
  div>
div>

Form inputs:

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

Emmet generates:

<form>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
  <button>Submitbutton>
form>

How to Practice

Open VS Code (or your editor). Create a new .html file. Try each abbreviation from this article. Build something real — a navigation, a card, a form. Challenge yourself: can you write it in one Emmet expression?

The syntax feels strange at first. After a few days of practice, it becomes muscle memory.