Emmet Cheatsheet
Emmet abbreviation quick reference
Emmet Cheatsheet is a free online tool from BrowserUtils that emmet abbreviation quick reference. It runs entirely in your browser — your data never leaves your device. No account required.
>
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>
How to use Emmet Cheatsheet
- 1 Paste or type your input into the editor above.
- 2 The tool processes your data instantly — right in your browser, with nothing sent to a server.
- 3 Copy the result with one click or continue editing your input.
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.
Emmet Cheatsheet specs
- Runtime
- 100% client-side (browser)
- Cost
- Free — no account, no rate limits, no usage caps
- Browser support
- Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Part of
- 299 developer tools on BrowserUtils (100% client-side)
Questions
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.
How do I use Emmet to generate lorem ipsum text?
Type lorem and press Tab to generate a paragraph of placeholder text. Use lorem10 for 10 words or p*3>lorem for three paragraphs. You can combine it with any Emmet nesting syntax.
Does Emmet work in VS Code without an extension?
Yes. VS Code has built-in Emmet support for HTML, CSS, JSX, and many other file types. No extra extension is needed. You can trigger expansions with Tab or by using the "Emmet: Expand Abbreviation" command.
How do I add attributes and classes with Emmet?
Use . for classes (div.container), # for IDs (div#main), and [] for attributes (input[type="email"]). Combine them freely, e.g., form#login>input.field[type="email"]+button.btn expands to a complete form structure.
Comments
Related tools
More Developer Reference
ASCII TableHTML Entities ReferenceRegex CheatsheetCSS Selectors ReferenceHTML Color NamesKeyboard KeycodesUnicode TableHTML Tags Reference
View all Developer Reference tools
Comments