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