Emmet for HTML

The Problem: Writing HTML Is Slow

Type this by hand:

<div class="container">
  <header class="header">
    <h1>Welcome</h1>
  </header>
  <main class="content">
    <p>This is a paragraph.</p>
  </main>
</div>

That's a lot of typing. Opening tags, closing tags, attributes, indentation. Every single character.

Now imagine building a full webpage with dozens or hundreds of elements. It gets tedious fast.

There has to be a better way.

What Is Emmet?

Emmet is a shortcut language that lets you write HTML incredibly fast.

Instead of typing full HTML tags, you type a short abbreviation and press Tab. Emmet expands it into complete HTML.

Example:

Type this:

div.container

Press Tab

Get this:

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

Emmet isn't a separate tool you install. It's built into most modern code editors like VS Code, Sublime Text, and Atom. It just works.

Why Beginners Should Use Emmet

1. Write HTML 10x faster Less typing means you focus on structure, not syntax.

2. Fewer mistakes Emmet generates valid HTML. No forgotten closing tags or typos.

3. Learn HTML structure better Emmet forces you to think in terms of hierarchy and nesting.

4. Industry standard Professional developers use Emmet daily. Learning it early gives you good habits.

5. It's optional You can always type HTML manually. Emmet is there when you want speed.

How Emmet Works

Emmet watches what you type in your editor. When it recognizes an abbreviation, it offers to expand it.

Step-by-step:

1. Type an Emmet abbreviation: p

2. Press Tab (or Enter in some editors)

3. Emmet expands it: <p></p>

4. Your cursor is inside the tag, ready to add content

Most editors with Emmet support:

• VS Code (built-in)

• Sublime Text (built-in)

• Atom (built-in)

• WebStorm (built-in)

If you're using VS Code, Emmet works out of the box. Just type and press Tab.

Basic Emmet Syntax

Creating Elements

Type the tag name and press Tab.

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

Adding Classes

Use a dot (.) for classes.

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

Multiple classes:

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

Adding IDs

Use a hash (#) for IDs.

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

Combining Classes and IDs

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

Order doesn't matter:

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

Implicit Tag Names

If you don't specify a tag, Emmet assumes div.

.container       →    <div class="container"></div>
#header          →    <div id="header"></div>
.card.shadow     →    <div class="card shadow"></div>

Adding Attributes

Use square brackets [] for custom attributes.

a[href="#"]                →    <a href="#"></a>
img[src="photo.jpg"]       →    <img src="photo.jpg" alt="">
input[type="text"]         →    <input type="text">

Multiple attributes:

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

Creating Nested Elements

Use the > symbol to create child elements.

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

More complex nesting:

header>h1

Expands to:

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

Deeper nesting:

div>header>h1

Expands to:

<div>
  <header>
    <h1></h1>
  </header>
</div>

Sibling Elements

Use the + symbol to create elements at the same level.

header+main

Expands to:

<header></header>
<main></main>

Multiple siblings:

header+main+footer

Expands to:

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

Combining Nesting and Siblings

div>header+main+footer

Expands to:

<div>
  <header></header>
  <main></main>
  <footer></footer>
</div>

More complex:

div.container>header>h1^main>p^footer

The ^ climbs back up one level.

Expands to:

<div class="container">
  <header>
    <h1></h1>
  </header>
  <main>
    <p></p>
  </main>
  <footer></footer>
</div>

Repeating Elements with Multiplication

Use * to create multiple copies.

li*3

Expands to:

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

Real-world example:

ul>li*5

Expands to:

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

With classes:

div.card*3

Expands to:

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

Auto-Numbering with $

Use $ to add auto-incrementing numbers.

div.item$*3

Expands to:

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

In IDs:

section#section$*3

Expands to:

<section id="section1"></section>
<section id="section2"></section>
<section id="section3"></section>

Adding Text Content

Use curly braces {} for text.

h1{Welcome}

Expands to:

<h1>Welcome</h1>

With nested elements:

div>h1{Title}+p{Description}

Expands to:

<div>
  <h1>Title</h1>
  <p>Description</p>
</div>

Numbered text:

li{Item $}*3

Expands to:

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Generating HTML Boilerplate

The most powerful Emmet trick: generate a full HTML template instantly.

Type:

!

Press Tab

Get this:

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

This saves you from typing 10+ lines every time you create a new HTML file.

Alternative syntax (does the same thing):

html:5

Real-World Examples

Navigation Menu

nav>ul>li*4>a

Expands to:

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

Card Grid

div.grid>div.card*3>h2+p

Expands to:

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

Form

form>input[type="text"]+input[type="email"]+button{Submit}

Expands to:

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

Table

table>tr*3>td*4

Expands to:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Emmet Cheat Sheet

---

For Cheat Sheet You can visit here : Official Documentation

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn