home bytes cheat sheet emmet cheat sheet

Web Development

Emmet Cheat Sheet 2025 (VS Code, HTML, CSS, Abbreviation)

Last Updated: 26th March, 2025

Jay Abhani

Senior Web Development Instructor at almaBetter

Boost your web development speed with this Emmet cheat sheet, covering essential HTML and CSS abbreviations for Visual Studio Code with examples and shortcuts

Emmet is a powerful toolkit for web developers that significantly boosts productivity by allowing them to write HTML and CSS faster using abbreviations. It is widely supported in Visual Studio Code (VS Code), Sublime Text, Atom, and other modern code editors.

This Emmet cheat sheet serves as a quick reference guide for developers who want to master Emmet abbreviations, Emmet HTML cheat sheet, CSS Emmet cheat sheet, and how to use Emmet in VS Code efficiently.

What is Emmet?

Emmet is a shortcut system for writing HTML and CSS code efficiently. It expands short abbreviations into full-fledged HTML and CSS structures, reducing the time required to write repetitive code.

Why Use Emmet?

Faster HTML & CSS Coding – Saves time by expanding short codes into full syntax.
Error Reduction – Reduces typos and manual errors.
Improved Readability – Makes code easier to understand.
Works in Multiple Editors – Compatible with VS Code, Sublime, Atom, WebStorm, and more.

Enabling Emmet in Visual Studio Code

Emmet is pre-installed in VS Code, but you may need to enable it for specific file types.

Enabling Emmet for HTML and CSS

Emmet works automatically in .html and .css files in VS Code.

Enabling Emmet for Other File Types

If you need Emmet in a different file (e.g., JavaScript or PHP files), follow these steps:

Open VS Code Settings (Ctrl + ,).
Search for "Emmet: Include Languages".
Add the following settings in settings.json:

 {
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "php": "html"
    }
}

Now, Emmet will work in JavaScript and PHP files as well.

Emmet Cheat Sheet for HTML

The Emmet abbreviation cheat sheet for HTML helps speed up code writing using shortcuts.

Basic HTML Boilerplate

Press Tab or Enter after typing !, and Emmet will generate a full HTML boilerplate:

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

Creating HTML Elements

Emmet Code	Expands To
`h1{Hello World}`	`<h1>Hello World</h1>`
`p{This is a paragraph}`	`<p>This is a paragraph</p>`
`a{Click me}`	`<a href="">Click me</a>`

Nesting Elements

ul>li*3 creates an unordered list with 3 list items.

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

nav>ul>li*3>a{Link $} creates a nav bar with three links.

<nav>
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
    </ul>
</nav>

Using ID and Classes

Emmet Code	Expands To
`div#main`	`<div id="main"></div>`
`div.container`	`<div class="container"></div>`
`section.hero.banner`	`<section class="hero banner"></section>`

CSS Emmet Cheat Sheet

The CSS Emmet cheat sheet speeds up writing CSS rules.

Basic Properties

Emmet Code	Expands To
`w100`	`width: 100px;`
`h50`	`height: 50px;`
`m20`	`margin: 20px;`
`p10`	`padding: 10px;`

Text and Font Properties

Emmet Code	Expands To
`fs16`	`font-size: 16px;`
`fw700`	`font-weight: 700;`
`c#333`	`color: #333;`
`bg#f4f4f4`	`background-color: #f4f4f4;`

Flexbox Shortcuts

Emmet Code	Expands To
`d:f`	`display: flex;`
`fd:c`	`flex-direction: column;`
`ai:c`	`align-items: center;`
`jc:sb`	`justify-content: space-between;`

Advanced Emmet Cheat Sheet

Multiplication (*)

Creates multiple elements at once.

div*5

Expands to:

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

Numbering ($)

$ helps auto-increment numbers inside elements.

ul>li.item$*3

Expands to:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

Grouping (())

(div>h2{Title})+(div>p{Description})

Expands to:

<div>
    <h2>Title</h2>
</div>
<div>
    <p>Description</p>
</div>

Customizing Emmet in Visual Studio Code

You can customize Emmet settings in VS Code:

Changing Expand Key

By default, Tab expands Emmet abbreviations, but you can change it to Enter:

Open Settings (Ctrl + ,).
Search for "Emmet: Trigger Expansion On Tab".
Enable it.

Defining Custom Abbreviations

You can create custom Emmet abbreviations by modifying VS Code settings:

{
    "emmet.variables": {
        "lang": "en"
    },
    "emmet.syntaxProfiles": {
        "html": {
            "tag_case": "lower"
        }
    }
}

Emmet Cheat Sheet for Interviews

Here are some common interview questions related to Emmet:

Q. What is Emmet, and why is it used?

Emmet is a shortcut system for writing HTML and CSS faster.

Q. How do you create an Emmet abbreviation for a navigation bar?

nav>ul>li*3>a{Link $}

Q. Can you use Emmet in JavaScript files in VS Code?

Yes, by enabling "emmet.includeLanguages" in settings.json.

Q. How does $ work in Emmet?

$ is used for auto-incrementing numbers in class names, IDs, or text.

Conclusion

This Emmet cheat sheet serves as a quick reference guide for writing HTML and CSS efficiently in Visual Studio Code. Mastering Emmet abbreviations will speed up development and boost productivity.

More Cheat Sheets and Top Picks