Emmet Cheatsheet
// Emmet abbreviation quick reference
>
Child element
div>p → <div><p></p></div>
+
Sibling element
div+p → <div></div><p></p>
^
Climb up one level
div>p>span^em → <div><p><span></span></p><em></em></div>
*
Multiplication
ul>li*5 → <ul><li></li>...(x5)</ul>
()
Grouping
(div>dl>(dt+dd)*3)+footer
.
Class name
div.container → <div class="container"></div>
#
ID
div#main → <div id="main"></div>
[]
Custom attributes
a[href="#" title="Link"]
{}
Text content
p{Hello world} → <p>Hello world</p>
$
Item numbering
ul>li.item$*3 → item1, item2, item3
$$
Zero-padded numbering
li.item$$*3 → item01, item02, item03
$@3
Numbering starting from 3
li.item$@3*3 → item3, item4, item5
$@-
Reverse numbering
li.item$@-*3 → item3, item2, item1
!
HTML5 boilerplate
Full HTML document structure
a
Anchor tag
<a href=""></a>
a:link
Link with href
<a href="http://"></a>
a:mail
Mailto link
<a href="mailto:"></a>
link
Link element
<link rel="stylesheet" href="">
link:css
CSS stylesheet link
<link rel="stylesheet" href="style.css">
link:favicon
Favicon link
<link rel="shortcut icon" href="favicon.ico">
script:src
Script with source
<script src=""></script>
img
Image element
<img src="" alt="">
input
Input element
<input type="text">
inp
Input (alias)
<input type="text" name="" id="">
input:text
Text input
<input type="text" name="" id="">
input:password
Password input
<input type="password" name="" id="">
input:email
Email input
<input type="email" name="" id="">
input:checkbox
Checkbox input
<input type="checkbox" name="" id="">
input:radio
Radio input
<input type="radio" name="" id="">
input:submit
Submit button
<input type="submit" value="">
btn
Button element
<button></button>
form
Form element
<form action=""></form>
form:get
GET form
<form action="" method="get"></form>
form:post
POST form
<form action="" method="post"></form>
select>option*4
Select with options
<select><option>...</option>(x4)</select>
table>tr>td*3
Table with cells
Table structure
table>(thead>tr>th*3)+(tbody>tr>td*3)
Full table structure
Table with head and body
m
margin
m10 → margin: 10px;
mt / mr / mb / ml
margin-top/right/bottom/left
mt10 → margin-top: 10px;
p
padding
p10-20 → padding: 10px 20px;
pt / pr / pb / pl
padding-top/right/bottom/left
pt10 → padding-top: 10px;
w
width
w100 → width: 100px;
h
height
h50 → height: 50px;
d
display
dn → display: none;
db / di / dib / df / dg
display: block/inline/inline-block/flex/grid
df → display: flex;
pos
position
posa → position: absolute;
fz
font-size
fz16 → font-size: 16px;
fw
font-weight
fwb → font-weight: bold;
ff
font-family
ffs → font-family: serif;
ta
text-align
tac → text-align: center;
td
text-decoration
tdn → text-decoration: none;
tt
text-transform
ttu → text-transform: uppercase;
c
color
c#f00 → color: #f00;
bgc
background-color
bgc#fff → background-color: #fff;
bd
border
bd1-s-#ccc → border: 1px solid #ccc;
bdr
border-radius
bdr5 → border-radius: 5px;
op
opacity
op.5 → opacity: .5;
ov
overflow
ovh → overflow: hidden;
cur
cursor
curp → cursor: pointer;
trs
transition
trs → transition: prop time;
bxsh
box-shadow
bxsh → box-shadow: ...
div.wrapper>header+main+footer
Page layout
Common page structure
nav>ul>li*5>a{Item $}
Navigation with links
Nav list with numbered items
ul>li.item$$$*5
Triple-zero padded list
item001 through item005
div>(header>h1)+(section>p*2)+footer
Grouped nested structure
Complex nested layout
form>input:text+input:email+input:submit
Simple form
Form with text, email, submit
.row>.col*3
Grid row with columns
<div class="row"><div class="col">...
p>lorem
Paragraph with Lorem Ipsum
<p>Lorem ipsum dolor sit amet...</p>
p>lorem10
Paragraph with 10 Lorem words
<p>Lorem ipsum dolor sit amet...</p>
#About Emmet Cheatsheet
Free online Emmet cheatsheet. Quick reference for Emmet abbreviation syntax used in HTML and CSS. Includes nesting, multiplication, grouping, attributes, and text operators. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
What is Emmet? ▾
Emmet is a plugin for text editors that allows you to write HTML and CSS using shorthand abbreviations. For example, typing ul>li*5 and pressing Tab expands to a <ul> with five <li> elements. It is built into VS Code and most modern editors.
Does Emmet work with CSS? ▾
Yes, Emmet includes CSS abbreviations. For example, m10 expands to margin: 10px, p10-20 to padding: 10px 20px, and bgc expands to background-color. It supports all common CSS properties with shorthand notation.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/emmet-cheatsheet" width="100%" height="500" frameborder="0" title="Emmet Cheatsheet"></iframe>