Skip to main content
Hashnodei_codefullstack

Command Palette

Search for a command to run...

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

Updated
•9 min read
A
arnab samanta

The Magic Trick That Starts Every HTML File

Open VS Code. Create a new file called index.html. Type just one character:

!

Press Tab.

Watch this appear:

<!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. One keystroke. Complete HTML5 boilerplate. Your cursor is sitting in the body, ready to start building.

This is Emmet. And if this doesn't convince you to learn it, nothing will.

The Problem: Writing HTML is Boring and Slow

Imagine you need to create a navigation menu with five links. The traditional way:

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Blog</a></li>
  </ul>
</nav>

You have to type every single angle bracket, every opening tag, every closing tag, every nested level. It's like writing the same WhatsApp message to five people individually instead of just creating a group and sending it once.

By the time you finish typing all those tags, you've forgotten what you were actually trying to build. Your fingers hurt, your brain is tired, and you're questioning your career choices.

This is where Emmet comes in.

What is Emmet?

Emmet is a shortcut system that lets you write HTML (and CSS) super fast. It's like autocorrect, but instead of fixing typos, it expands short abbreviations into complete HTML structures.

Think of it as speaking in code. Instead of saying "I want a div with a class of container, containing a heading and three paragraphs," you just write div.container>h1+p*3 and Emmet translates that into proper HTML.

It's like how you type "omw" and your phone suggests "on my way," except Emmet turns a few characters into dozens of lines of properly structured HTML.

Emmet is built into most modern code editors like VS Code, Sublime Text, Atom, and WebStorm. You don't need to install anything extra in VS Code. It just works.

Why Emmet is Useful for Beginners

When you're learning HTML, you need to write a lot of it to practice. But typing every tag manually is tedious and error-prone. You forget closing tags, you misspell tag names, you mess up nesting.

Emmet helps you:

Write HTML 10x faster once you learn the shortcuts. Avoid syntax errors because Emmet generates valid HTML. Focus on structure instead of typing mechanics. Learn HTML patterns by seeing how abbreviations expand. Look like a coding wizard even when you're just starting out.

It's training wheels that actually make you faster, not slower. Like how calculators help you focus on math concepts instead of arithmetic, Emmet helps you focus on page structure instead of typing tags.

How Emmet Works Inside Code Editors

You type an Emmet abbreviation in your HTML file. You press Tab or Enter. Emmet magically expands it into full HTML. Your cursor is positioned exactly where you need to type next.

That's it. That's the entire workflow.

In VS Code (the most popular editor), Emmet is always active in HTML files. You don't need to enable it or configure anything. Just type and press Tab.

Let's see it in action.

Basic Emmet Syntax: Creating HTML Elements

Single Element

Type this:

div

Press Tab, get this:

<div></div>

Your cursor is positioned between the tags, ready for content.

Element with Content

Type this:

p{Hello World}

Press Tab, get this:

<p>Hello World</p>

The curly braces contain the text content you want inside the element.

Multiple Elements (Siblings)

Type this:

h1+p+p

Press Tab, get this:

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

The plus sign means "and then another one at the same level." Like siblings standing next to each other.

Adding Classes and IDs

Class

Type this:

div.container

Press Tab, get this:

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

The dot adds a class, just like in CSS selectors.

Multiple Classes

Type this:

div.container.main.active

Press Tab, get this:

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

Chain multiple dots to add multiple classes.

ID

Type this:

div#header

Press Tab, get this:

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

The hash adds an ID, just like in CSS selectors.

Class and ID Together

Type this:

div#header.main-header.sticky

Press Tab, get this:

<div id="header" class="main-header sticky"></div>

Implicit Tag Names

If you just specify a class or ID without a tag name, Emmet assumes div:

Type this:

.container

Press Tab, get this:

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

But this only works in certain contexts. Inside a ul, Emmet knows you probably want an li:

Type this inside a list:

ul>.item

Press Tab, get this:

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

Emmet is smart about context.

Adding Other Attributes

Single Attribute

Type this:

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

Press Tab, get this:

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

Square brackets add any attribute you want.

Multiple Attributes

Type this:

img[src="photo.jpg" alt="My photo"]

Press Tab, get this:

<img src="photo.jpg" alt="My photo">

Separate multiple attributes with spaces inside the brackets.

Attributes with Classes

Type this:

input.form-control[type="text" placeholder="Enter name"]

Press Tab, get this:

<input class="form-control" type="text" placeholder="Enter name">

You can combine everything: tag names, classes, IDs, and attributes.

Creating Nested Elements

Child Element

Type this:

div>p

Press Tab, get this:

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

The greater-than symbol means "contains" or "has a child."

Multiple Levels of Nesting

Type this:

div>ul>li

Press Tab, get this:

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

Chain the greater-than symbols to nest deeper.

Siblings Inside a Parent

Type this:

div>h1+p

Press Tab, get this:

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

The h1 and p are siblings inside the div.

Grouping with Parentheses

Type this:

div>(header>h1)+(main>p)+(footer>p)

Press Tab, get this:

<div>
  <header>
    <h1></h1>
  </header>
  <main>
    <p></p>
  </main>
  <footer>
    <p></p>
  </footer>
</div>

Parentheses group elements together so you can nest complex structures without confusion.

Repeating Elements with Multiplication

Multiple Copies

Type this:

li*5

Press Tab, get this:

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

The asterisk multiplies the element. Like "copy-paste but faster."

Repeated Elements with Classes

Type this:

div.item*3

Press Tab, get this:

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

Numbered Classes Using Dollar Sign

Type this:

div.item$*3

Press Tab, get this:

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

The dollar sign is replaced with incrementing numbers. Super useful for creating lists or grids where each item needs a unique class.

Multiple Dollar Signs for Padding

Type this:

div.item$$*3

Press Tab, get this:

<div class="item01"></div>
<div class="item02"></div>
<div class="item03"></div>

More dollar signs add zero-padding to the numbers.

Numbering in Attributes

Type this:

img[src="image$.jpg"]*3

Press Tab, get this:

<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">

Works inside attributes too.

Practical Examples: Real-World Patterns

Navigation Menu

Type this:

nav>ul>li*5>a[href="#"]

Press Tab, get this:

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

Instead of typing 20+ tags manually, you typed one line.

Card Grid

Type this:

div.container>div.card*3>h2.title+p.description

Press Tab, get this:

<div class="container">
  <div class="card">
    <h2 class="title"></h2>
    <p class="description"></p>
  </div>
  <div class="card">
    <h2 class="title"></h2>
    <p class="description"></p>
  </div>
  <div class="card">
    <h2 class="title"></h2>
    <p class="description"></p>
  </div>
</div>

Perfect for building repeated component structures.

Form with Labels and Inputs

Type this:

form>div.form-group*3>label+input.form-control

Press Tab, get this:

<form>
  <div class="form-group">
    <label></label>
    <input class="form-control">
  </div>
  <div class="form-group">
    <label></label>
    <input class="form-control">
  </div>
  <div class="form-group">
    <label></label>
    <input class="form-control">
  </div>
</form>

Forms in seconds instead of minutes.

Table Structure

Type this:

table>thead>tr>th*3^^tbody>tr*3>td*3

Press Tab, get this:

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

The double caret ^^ climbs up two levels in the tree. It's like saying "go back to the parent's parent."

Climbing Up with Caret

Sometimes you need to go back up the nesting tree.

Type this:

div>ul>li>a^^p

Press Tab, get this:

<div>
  <ul>
    <li><a href=""></a></li>
  </ul>
  <p></p>
</div>

The ^^ climbs up two levels, so p is a sibling of ul, not li. One caret ^ climbs one level.

Without the carets:

div>ul>li>a>p

Would give you:

<div>
  <ul>
    <li>
      <a href="">
        <p></p>
      </a>
    </li>
  </ul>
</div>

Which is probably not what you want.

Text Content with Curly Braces

Type this:

h1{Welcome to My Site}+p{This is a paragraph}

Press Tab, get this:

<h1>Welcome to My Site</h1>
<p>This is a paragraph</p>

Curly braces inject text content directly into elements.

Numbered Text

Type this:

ul>li.item$*3{Item $}

Press Tab, get this:

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

Dollar signs work inside text too.

Tips for Learning Emmet

Start with the boilerplate shortcut. Use it every single time you create an HTML file. Start simple with basic tags and classes. Add one new syntax feature per day. Tab through the generated code to see where your cursor lands. Practice on real projects, not just examples. Use Emmet for repetitive structures, not one-off tags. Remember it's optional. You can mix Emmet and manual typing.

The best way to learn is to use it. Open VS Code, create an HTML file, type ! and press Tab. Then try every example in this guide yourself. Type the abbreviation, press Tab, see the magic happen.

Within a week, you'll be writing HTML faster than your friends can complain about how slow HTML is to write.

Common Emmet Patterns Cheat Sheet

! - HTML5 boilerplate (START HERE)
div.className - div with class
div#idName - div with ID
ul>li*5 - list with 5 items
div>p*3>span - nested with multiplication
div.card$*3 - numbered classes
a[href="#" target="_blank"] - attributes
div{Some text} - element with content
header>nav>ul>li*4>a - navigation structure
form>(input[type="text"]+button)*3 - form fields

The Takeaway

Emmet is a shorthand language for HTML. It expands abbreviations into full HTML structures. It's built into VS Code and most editors. The first thing you should learn is ! for the HTML5 boilerplate. That alone will save you hundreds of keystrokes.

The core syntax:

  • ! for HTML5 boilerplate

  • > for children

  • + for siblings

  • * for multiplication

  • . for classes

  • # for IDs

  • [] for attributes

  • {} for text

  • ^ to climb up

That's 90% of what you'll use daily. The rest you can look up when needed.

Emmet won't make you a better HTML developer by itself. But it removes the friction of typing, so you can focus on building actual websites instead of wrestling with angle brackets. It's like switching from a bullock cart to a motorcycle. You still need to know the route, but you'll get there way faster.

Start every HTML file with ! and Tab. That's your new habit. Everything else in Emmet builds from there.

#emet#html5

More from this blog

i_codefullstack

44 posts