Emmet is a powerful toolkit that greatly enhances HTML & CSS workflow through abbreviations that expand into full code. This cheat sheet features the most important Emmet operators, symbols, and abbreviations for rapid web development.

EMMET CHEAT SHEET.md

EMMET CHEAT SHEET

Emmet is a powerful toolkit that greatly enhances HTML & CSS workflow through abbreviations that expand into full code. This cheat sheet features the most important Emmet operators, symbols, and abbreviations for rapid web development.

INSTALLATION

Emmet comes pre-installed in most modern code editors including:

• Visual Studio Code
• WebStorm
• Sublime Text
• Atom
• Notepad++

For other editors, visit the official Emmet documentation:

• Emmet Installation

CORE OPERATORS

These operators control element hierarchy and relationships

<!-- Child: Creates nested elements -->
nav>ul>li

<!-- Sibling: Creates elements at same level -->
div+p+span

<!-- Climb-up: Moves back up the hierarchy -->
div>p>span^ul

<!-- Grouping: Controls operator precedence -->
header+(main>section*2)+footer

<!-- Multiplication: Repeats elements -->
li*5

ELEMENT GENERATION

Creating elements with classes, IDs, and attributes

<!-- Class shorthand -->
div.container

<!-- ID shorthand -->
div#header

<!-- Multiple classes -->
div.container.fluid.dark

<!-- Combined ID and class -->
div#main.container

<!-- Custom attributes -->
a[href="https://example.com" target="_blank"]

<!-- Multiple attributes -->
img[src="image.jpg" alt="description" width="500"]

CONTENT & NUMBERING

Adding text content and automatic numbering

<!-- Text content -->
p{Hello World}

<!-- Numbering -->
li.item$*3

<!-- Zero-padded numbering -->
li.item$$*3

<!-- Custom numbering -->
li.item$@5*3

<!-- Reverse numbering -->
li.item$@-*3

<!-- Text with numbering -->
p{Item $}*3

CSS ABBREVIATIONS

Emmet also works for CSS properties

/* Common properties */
m10 → margin: 10px;
p20-30 → padding: 20px 30px;
bg#f → background: #fff;
d:n → display: none;

/* Position properties */
pos:a → position: absolute;
t10 → top: 10px;
r5 → right: 5px;

/* Flexbox */
df → display: flex;
aic → align-items: center;
jcc → justify-content: center;

SPECIAL FEATURES

Advanced Emmet functionalities

<!-- Lorem Ipsum generator -->
lorem10 → Generates 10 words
lorem*5 → Generates 5 paragraphs

<!-- HTML5 boilerplate -->
! → Expands to complete HTML5 document

<!-- CSS reset -->
reset:css → Insets CSS reset

<!-- Meta tags -->
meta:utf8 → <meta charset="UTF-8">
meta:vp → Viewport meta tag

PRACTICAL EXAMPLES

Common real-world use cases

<!-- Navigation -->
nav>ul>li*5>a[href="#"]{Item $}

<!-- Card component -->
.card>img[src="image.jpg"]+h3{Title}+p{Description}+a.btn[href="#"]{Click}

<!-- Form -->
form.form>label[for="name"]{Name}+input#name[type="text"]+label[for="email"]{Email}+input#email[type="email"]+button[type="submit"]{Submit}

<!-- Grid layout -->
.container>.row>.col-$.col-md-6*4

<!-- Bootstrap components -->
.btn.btn-primary
.alert.alert-success
.modal.fade

ADVANCED TECHNIQUES

Powerful combinations and shortcuts

<!-- Implicit tag names -->
.emphasis → <div class="emphasis"></div>
span.highlight → <span class="highlight"></span>

<!-- Custom attributes with values -->
div[data-id=$]*3

<!-- Mixed content -->
p>{Click }+a[href="#"]{here}+{ to continue}

<!-- CSS gradients -->
bg:linear-gradient(45deg,#f00,#00f)

<!-- CSS animations -->
anim:slideInRight 2s ease-in-out

EDITOR INTEGRATION

Most editors support these additional features:

• Tab expansion: Type abbreviation + Tab
• Wrap with abbreviation: Select text, then use Emmet wrap command
• Interactive expansion: Preview and modify before expansion
• Update image size: img[src="image.jpg" alt] → Updates width/height automatically

QUICK REFERENCE

Most frequently used abbreviations:

• Hierarchy: >, +, ^
• Multiplication: *
• Numbering: $, $$
• Attributes: []
• Text: {}
• Class: .
• ID: #
• Boilerplate: !
• Lorem Ipsum: lorem

---

Author: Wasula Benjamin
Role: UIUX Designer & Developer
Last Updated: 14TH OCTOBER, 2025