Emmet for HTML

Source: Dev.to

Writing HTML can feel slow and repetitive. Typing “, `

, opening and closing tags over and over… What if you could type div` and instantly get “? 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 →

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

---

Why Use Emmet?

Without Emmet

  

    - 

    - 

    - 

  

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 10× 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 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

Example 2

p → Tab

Result

Example 3

h1 → Tab

Result

## 

2. Adding Classes

Use a dot (.) to add a class.

Example

div.container → Tab

Result

Multiple classes

div.card.shadow → Tab

Result

3. Adding IDs

Use a hash (#) to add an ID.

Example

div#header → Tab

Result

Class and ID together

div#header.navbar → Tab

Result

4. Adding Attributes

Use square brackets [] to add custom attributes.

Example

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

Result

[](https://google.com)

Multiple attributes

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

Result

[Image: Photo]

5. Adding Text Content

Use curly braces {} to add text inside elements.

Example

p{Hello World} → Tab

Result

Hello World

With class

h1.title{Welcome} → Tab

Result

## Welcome

Creating Nested Elements

Use > to create child elements (nesting).

Example 1

div>p → Tab

Result

Example 2

ul>li → Tab

Result

  - 

Deeper nesting

div>ul>li → Tab

Result

  

    - 

With classes

div.container>h1.title → Tab

Result

  
## 

Repeating Elements with Multiplication

Use * to create multiple copies.

Example 1

li*3 → Tab

Result

- 

- 

- 

Example 2

div.box*4 → Tab

Result

With nesting

ul>li*5 → Tab

Result

  - 

  - 

  - 

  - 

  - 

Emmet Cheat Sheet & Examples

A quick reference for using Emmet to write HTML faster.

---

Combining Everything

Now let’s combine what we learned.

Example 1 – Navigation menu

Abbreviation

nav>ul>li*4>a → Tab

Result

  

    - []()

    - []()

    - []()

    - []()

  

Example 2 – Card layout

Abbreviation

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

Result

  
    
## 

    

  
  
    
## 

    

  
  
    
## 

    

  

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

---

Creating Siblings with +

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

Simple sibling pair

Abbreviation

h1+p → Tab

Result

## 

Multiple siblings

Abbreviation

h1+p+p → Tab

Result

## 

Complex example

Abbreviation

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

Result

  
## 

  
    

      - 

      - 

      - 

    

  

---

HTML Boilerplate with Emmet

The most useful shortcut for creating a full HTML document.

Shortcut

! → Tab

Result

  
  
  Document

Alternative: html:5 → Tab produces the same output.

---

Practical Examples

Example 1 – Blog post structure

Abbreviation

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

Result

  
## 

  

  
    

    

    

  

Example 2 – Simple form

Abbreviation

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

Result

  
  
  Submit

Example 3 – Table

Abbreviation

table>tr*3>td*4 → Tab

Result

---

Emmet Cheat Sheet

| | **Siblings** |div+p|

| | **Multiplication** |li*3|-

| | **Boilerplate** |!orhtml:5` | Full HTML template (see above) |

---

Tips for Beginners

1. Start simple – practice with div, p, h1.
2. Use it daily – the more you type, the faster you become.
3. Don’t memorize everything – learn the shortcuts you need most.
4. Try each example – open VS Code and type the abbreviations yourself.
5. Remember: Emmet is optional; you can always write HTML manually.

---

Common Mistakes

• Forgetting to press Tab – type the abbreviation, then press Tab to expand.

• Typos in the abbreviation

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

• Not checking the result – always review the generated markup and adjust if necessary.

---

Summary

• Emmet = shortcuts for writing HTML quickly.
• How it works:
  1. Type an abbreviation.
  2. Press Tab.
  3. Emmet expands it to full HTML.

Key symbols

• . – class
• # – ID
• > – child (nesting)
• + – sibling
• * – repetition
• [] – attributes
• {} – text content
• ! – HTML boilerplate

Most useful shortcuts

• ! → full HTML template
• div.container>ul>li*5 → quick list structures
• form>input[type]*3 → simple forms

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