Emmet for HTML

Writing HTML can feel slow and repetitive. Typing <div></div>, <p></p>, opening and closing tags over and over...

What if you could type div and instantly get <div></div>? That's what Emmet does.

What is Emmet?

Emmet is a shortcut tool built into most code editors. It lets you write HTML super fast using abbreviations.

Simple example:

• You type: p
• Press Tab
• You get: <p></p>

That's it. Emmet turns short codes into full HTML.

Why Use Emmet?

Without Emmet:

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

You type all of this manually. Lots of typing, lots of time.

With Emmet:

div.container>ul>li*3

Press Tab, and you get the same HTML instantly!

Benefits:

• Write HTML 10x faster
• Fewer typos (no missing closing tags)
• Less repetitive work
• Focus on structure, not syntax

How Emmet Works

Emmet is built into most modern code editors:

• VS Code (built-in)
• Sublime Text (built-in)
• Atom (built-in)
• WebStorm (built-in)

How to use it:

1. Type an Emmet abbreviation
2. Press Tab or Enter
3. It expands into HTML

That's all you need to know to get started!

Basic Emmet Syntax

Let's learn the fundamentals one by one.

1. Creating Simple Elements

Type the tag name and press Tab.

Example 1:

div → Tab

Result:

<div></div>

Example 2:

p → Tab

Result:

<p></p>

Example 3:

h1 → Tab

Result:

<h1></h1>

Easy! Just type the tag name.

2. Adding Classes

Use a dot (.) to add a class.

Example:

div.container → Tab

Result:

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

Multiple classes:

div.card.shadow → Tab

Result:

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

3. Adding IDs

Use a hash (#) to add an ID.

Example:

div#header → Tab

Result:

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

Class and ID together:

div#header.navbar → Tab

Result:

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

4. Adding Attributes

Use square brackets [] to add custom attributes.

Example:

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

Result:

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

Multiple attributes:

img[src="photo.jpg" alt="Photo"] → Tab

Result:

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

5. Adding Text Content

Use curly braces {} to add text inside elements.

Example:

p{Hello World} → Tab

Result:

<p>Hello World</p>

With class:

h1.title{Welcome} → Tab

Result:

<h1 class="title">Welcome</h1>

Creating Nested Elements

Use > to create child elements (nesting).

Example 1:

div>p → Tab

Result:

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

Example 2:

ul>li → Tab

Result:

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

Deeper nesting:

div>ul>li → Tab

Result:

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

With classes:

div.container>h1.title → Tab

Result:

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

Repeating Elements with Multiplication

Use * to create multiple copies.

Example 1:

li*3 → Tab

Result:

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

Example 2:

div.box*4 → Tab

Result:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

With nesting:

ul>li*5 → Tab

Result:

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

Combining Everything

Now let's combine what we learned.

Example 1: Navigation menu

nav>ul>li*4>a → Tab

Result:

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

Example 2: Card layout

div.container>div.card*3>h2+p → Tab

Result:

<div class="container">
  <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>

Note: + creates sibling elements (elements at the same level).

Creating Siblings with +

Use + to create elements next to each other (siblings).

Example:

h1+p → Tab

Result:

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

Multiple siblings:

h1+p+p → Tab

Result:

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

Complex example:

header>h1+nav>ul>li*3 → Tab

Result:

<header>
  <h1></h1>
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</header>

HTML Boilerplate with Emmet

The most useful Emmet shortcut: creating the full HTML structure.

Just type:

! → Tab

You get:

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

Instant complete HTML page structure!

Alternative (same result):

html:5 → Tab

Practical Examples

Example 1: Blog Post Structure

article>h1.title+p.meta+div.content>p*3 → Tab

Result:

<article>
  <h1 class="title"></h1>
  <p class="meta"></p>
  <div class="content">
    <p></p>
    <p></p>
    <p></p>
  </div>
</article>

Example 2: Form

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

Result:

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

Example 3: Table

table>tr*3>td*4 → Tab

Result:

<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

Basic:

• tagname → <tagname></tagname>
• div → <div></div>

Classes and IDs:

• .classname → <div class="classname"></div>
• #idname → <div id="idname"></div>
• div.class#id → <div class="class" id="id"></div>

Attributes:

• a[href] → <a href=""></a>
• img[src alt] → <img src="" alt="">

Text:

• p{text} → <p>text</p>

Nesting:

• div>p → Parent > Child
• div+p → Siblings

Multiplication:

• li*3 → Creates 3 <li> elements

Boilerplate:

• ! or html:5 → Full HTML template

Tips for Beginners

1. Start simple
Just practice basic tags first: div, p, h1

2. Use it daily
The more you use Emmet, the faster you get

3. Don't memorize everything
Learn what you use most often

4. Try each example
Open VS Code and actually type these shortcuts

5. Emmet is optional
You can still write HTML normally. Emmet just makes it faster

Common Mistakes

Forgetting to press Tab

• Type the abbreviation
• Then press Tab to expand it

Typos in abbreviation

dvi.container → Won't work
div.container → Works!

Not checking the result
Always check what Emmet generated and adjust if needed

Summary

Emmet = Shortcuts for writing HTML fast

How it works:

1. Type abbreviation
2. Press Tab
3. Get full HTML

Key symbols:

• . for classes
• # for IDs
• > for children (nesting)
• + for siblings
• * for repetition
• [] for attributes
• {} for text
• ! for HTML boilerplate

Most useful shortcuts:

• ! → Full HTML template
• div.container>ul>li*5 → Quick structures
• form>input[type]*3 → Forms

Start using Emmet today, and you'll wonder how you ever coded without it!