DEV Community

Pratham
Pratham

Posted on

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

#webdev #html #emmet #chaicode

Prerequisites: You know what HTML tags are (<div>, <p>, <ul>).
Audience: Developers who are tired of typing < and > a thousand times a day.

The Root: The "Carpal Tunnel" Problem

Writing HTML the "old school" way is painful. It feels like this:

  1. Type <
  2. Type d, i, v
  3. Type >
  4. (Editor adds closing tag </div>)
  5. Move cursor inside.
  6. Type <...

It’s slow. It breaks your thought process. You spend more time pressing Shift + , than actually building your website.

The Solution? Texting Shortcuts.

Remember how you text?

  • You type "omg" → Phone corrects to "Oh my god"
  • You type "brb" → Phone corrects to "Be right back"

Emmet is exactly this, but for HTML.
It is a plugin built into almost every modern code editor (VS Code, Sublime, Atom).

You type a short abbreviation, hit Tab, and Emmet expands it into full, valid HTML code.

The Trunk: The Core Abbreviations

Let's learn the basic "vocabulary" of Emmet. The beauty is that it reuses the CSS syntax you already know.

1. The Tag (The Species)

Just type the tag name. No brackets.

  • You Type: div
  • You Press: Tab

  • Emmet Writes: <div></div>

  • You Type: h1

  • Emmet Writes: <h1></h1>

2. The Class (The Dot .)

Just like in CSS, a dot means "Class".

  • You Type: .container

  • Emmet Writes: <div class="container"></div>
    (Note: If you don't specify a tag, Emmet assumes it's a div)

  • You Type: p.text-bold

  • Emmet Writes: <p class="text-bold"></p>

3. The ID (The Hash #)

Just like in CSS, a hash means "ID".

  • You Type: #navbar

  • Emmet Writes: <div id="navbar"></div>

  • You Type: form#login

  • Emmet Writes: <form id="login" action=""></form>

4. The Combination (Mixing Them)

You can chain them together like a sentence.

  • You Type: button.btn#submit
  • Emmet Writes: <button class="btn" id="submit"></button>

Diagram: The Expansion Flow 

YOUR FINGERS                     THE EDITOR (EMMET)
    │                                    │
    ▼                                    ▼
Type: "ul.list"  ───────────────▶  detects ".list" (Class)
    │                              detects "ul" (Tag)
    │                                    │
    ▼                                    ▼
Press: [TAB]     ───────────────▶  EXPANDS TO:
    │                              <ul class="list">
    │                                  | (Cursor lands here)
    │                              </ul>
Enter fullscreen mode Exit fullscreen mode

The Branches: Advanced Power Moves

Okay, saving a few keystrokes is nice. But now let's look at the features that make you look like a wizard.

5. Multiplication (*)

This is the "Copy-Paste" killer.
Need a list with 5 items? Don't copy-paste <li> 5 times. Multiply it.

  • You Type: li*5

  • Emmet Writes:

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

6. The Child (>) aka Nesting

This puts elements inside other elements. Think of it like a Russian Doll.

  • You Type: ul>li
  • Translation: "Make a ul, and put an li inside it."

  • Emmet Writes:

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

Combo Move (The Classic Menu):

  • You Type: ul>li*3

  • Emmet Writes:

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

7. The Sibling (+) aka The Neighbor

This puts elements next to each other, not inside.

  • You Type: h1+p
  • Translation: "Make an h1, then place a p right after it."

  • Emmet Writes:

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

8. Grouping (()) aka The Math Logic

Sometimes you need to group logic together.
"I want a Header with a Logo... AND THEN a Main section."

  • You Type: (header>h1)+main

  • Emmet Writes:

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

(Without brackets, the main would end up inside the h1! Brackets keep the hierarchy clean.)

The Ultimate Shortcut: The Boilerplate (!)

Every HTML file starts the same way: <!DOCTYPE html>, <html>, <head>, <body>...
It's boring to type.

Emmet solves this with one character.

  • You Type: !
  • You Press: Tab
  • Emmet Writes: 
<!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>
    <!-- Cursor lands right here! -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This is the first thing you should do in every new HTML file.

Summary Cheat Sheet

Symbol Name Meaning Example Result
. Class "Wear this uniform" .box <div class="box"></div>
# ID "Your ID card" #nav <div id="nav"></div>
> Child "Go inside" div>p <div><p></p></div>
+ Sibling "Stand next to" h1+h2 <h1></h1><h2></h2>
* Multiply "Clone yourself" p*3 3 paragraphs
$ Number "Count 1, 2, 3..." li.item$*3 <li class="item1">... item2... item3
{} Content "Fill with text" p{Hello} <p>Hello</p>

Conclusion: Speed is a Byproduct

You might think using Emmet is just about showing off speed. It's not.

It's about removing friction.

When you don't have to think about typing brackets, closing tags, and quotes, your brain is free to think about the Structure and the Design.

Start small.

  1. Use ! for your layout.
  2. Use . for your classes.
  3. Use > for your lists.

Before you know it, you'll be writing HTML as fast as you can think.

Happy Coding!

Found this helpful? This is part of the "Unboxed" series where we break down web tech from first principles.

Top comments (0)