CheatSheetsHero

Browse / Emmet Cheatsheet

April 26, 2025 20:02
css
editor
emmet
html
productivity
Download PDF
Missing something?

Emmet Cheatsheet

Unlock lightning-fast coding with Emmet! This cheatsheet covers essential HTML and CSS abbreviations, operators, and tips to dramatically speed up your web development workflow.

HTML Abbreviation Basics

Basic Elements & Nesting

tag

Basic HTML tag.

Example:

div

Expands to:

<div></div>

tag>child

Nested element.

Example:

div>p

Expands to:

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

tag>child1>child2

Multiple levels of nesting.

Example:

div>ul>li

Expands to:

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

tag+sibling

Sibling element.

Example:

h1+p

Expands to:

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

tag*N

Multiplication.

Example:

li*3

Expands to:

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

tag1>tag2*N

Combined nesting and multiplication.

Example:

ul>li*3

Expands to:

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

tag1+tag2*N

Combined sibling and multiplication.

Example:

div+p*2

Expands to:

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

a>b+c

A contains B, and C is sibling of B.

Example:

div>h1+p

Expands to:

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

Attributes & Text

tag#id

Element with an ID.

Example:

div#header

Expands to:

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

tag.class

Element with a class.

Example:

p.text-center

Expands to:

<p class="text-center"></p>

tag.class1.class2

Element with multiple classes.

Example:

div.container.fluid

Expands to:

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

tag[attr=value]

Custom attribute with value.

Example:

a[href="#" target="_blank"]

Expands to:

<a href="#" target="_blank"></a>

tag{text}

Element with text content.

Example:

h1{Hello, World!}

Expands to:

<h1>Hello, World!</h1>

a[href=""]{Link}

Combined attributes and text.

Example:

a[href="/about"]{About Us}

Expands to:

<a href="/about">About Us</a>

#id.class{text}

Combined ID, Class, and Text (Implicit tag is div).

Example:

#greeting.message{Welcome}

Expands to:

<div id="greeting" class="message">Welcome</div>

Grouping & Up Operators

(abbreviation)

Grouping elements.

Example:

(header>nav)+main+footer

Expands to:

<header>
	<nav></nav>
</header>
<main></main>
<footer></footer>

tag^

Go up one level.

Example:

div>p>span^^div

Expands to:

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

tag^^^

Go up multiple levels.

Example:

div>ul>li>a^^^p

Expands to:

<div>
	<ul>
		<li>
			<a href=""></a>
		</li>
	</ul>
	<p></p>
</div>

tag>({child})

Grouping with nesting.

Example:

div>(h1+p)*2

Expands to:

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

tag1>(tag2>tag3)^tag4

Combined grouping and up operator.

Example:

div>(ul>li)^p

Expands to:

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

table>(thead>tr>th*3)^(tbody>tr>td*3)*2

Complex table structure.

Example:

table>(thead>tr>th*3)^(tbody>tr>td*3)*2

Expands to:

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>	
			<td></td>
		</tr>
	</tbody>
</table>

Implicit Tags

.class

Expands to <div class="class"></div>

#id

Expands to <div id="id"></div>

ul>.item

Expands to <ul><li class="item"></li></ul> (li is implicit for ul)

table>.row

Expands to <table><tr class="row"></tr></table> (tr is implicit for table, tbody, thead, tfoot)

tr>.cell

Expands to <tr><td class="cell"></td></tr> (td is implicit for tr)

map>area

Expands to <map><area></area></map> (area is implicit for map)

select>option

Expands to <select><option></option></select> (option is implicit for select, datalist)

HTML Numbering & Lorem Ipsum

Numbering ($ Operator)

li.item$

Adds a number counter.

Example:

li.item$*3

Expands to:

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

li.item$$$

Pads numbers with leading zeros.

Example:

li.item$$$*3

Expands to:

<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>

li.item$@N

Sets the starting number.

Example:

li.item$@5*3

Expands to:

<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>

li.item$@-

Reverses the counter order.

Example:

li.item$@-*3

Expands to:

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

li.item$@-N

Reverses counter and sets starting number.

Example:

li.item$@-5*3

Expands to:

<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>

ul>li.item$*5

Combined with nesting.

Example:

ul>li.item$*5

Expands to:

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

h${Heading $}

Numbering within text content.

Example:

h${Heading $}*3

Expands to:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Lorem Ipsum

lorem

Generates 30 words of lorem ipsum text.

loremN

Generates N words of lorem ipsum.

Example:

lorem10

Expands to 10 words of lorem ipsum.

p>lorem

Generates lorem ipsum inside a paragraph.

Example:

p>lorem5

Expands to:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

ul>li*3>lorem5

Combined with other operators.

Example:

div>p*2>lorem10

Expands to two paragraphs, each with 10 words of lorem ipsum.

Common HTML Aliases

! or html:5

HTML5 doctype and basic structure.

a

link

script

script:src

img

form

input

btn

CSS Abbreviations

Basic Properties & Values

p

padding: ;

Example: p10 expands to padding: 10px;

m

margin: ;

Example: m20-10 expands to margin: 20px 10px;

w

width: ;

Example: w100p expands to width: 100%;

h

height: ;

Example: h50vh expands to height: 50vh;

d

display: ;

Example: dib expands to display: inline-block;

pos

position: ;

Example: posa expands to position: absolute;

fz

font-size: ;

Example: fz16px expands to font-size: 16px;

cl

color: ;

Example: clf expands to color: #fff;

Value Operators

px, em, %, etc.

Unit aliases appended directly.

Example: w100% -> width: 100%;
fz1.2em -> font-size: 1.2em;

-

Separator for multiple values.

Example: m10-20 -> margin: 10px 20px;
p5-10-5-10 -> padding: 5px 10px 5px 10px;

!

Adds !important.

Example: d!i -> display: inline !important;
w100%!i -> width: 100% !important;

c#

Hex color.

Example: c#333 -> color: #333;
bg#f0f0f0 -> background-color: #f0f0f0;

c#rgb

Hex color alias (e.g., f for fff).

Example: cf -> color: #fff;
c0 -> color: #000;

c:r

RGB color.

Example: c:r128,0,0 -> color: rgb(128,0,0);

c:ra

RGBA color.

Example: c:ra0,0,0,.5 -> color: rgba(0,0,0,.5);

c:h

HSL color.

Example: c:h0,100,50 -> color: hsl(0,100,50);

c:ha

HSLA color.

Example: c:ha0,100,50,.5 -> color: hsla(0,100,50,.5);

Common CSS Aliases

@f

@font-face {}

@m

@media screen {}

pos:a

position: absolute;

pos:f

position: fixed;

pos:r

position: relative;

pos:s

position: static;

d:n

display: none;

d:b

display: block;

d:i

display: inline;

d:ib

display: inline-block;

bxz:bb

box-sizing: border-box;