Emmet-cheatsheet

Gratis

Een doorzoekbaar, afdrukbaar Emmet-naslagwerk: nesting-operators, vermenigvuldiging, groepering, attributen, HTML- en CSS-afkortingen. Gratis.

Nesting operators

div>ul>li

> child: li inside ul inside div

div+p+blockquote

+ sibling: elements on the same level

div+div>p>span+em

Combine child and sibling operators

div+div>p>span+em^bq

^ climb up: bq is a sibling of p

div+div>p>span+em^^^bq

Each ^ climbs one more level up

nav>ul>li*4>a

A four-link navigation in one line

ul>li>a[href=#]{Link}

Nest, attribute and text combined

div>p+p+p

One parent, three paragraph children

Multiplication & numbering

ul>li*5

* repeats the element 5 times

li.item$*3

$ = counter: item1, item2, item3

li.item$$$*3

Pad with zeros: item001, item002...

li.item$@-*3

@- counts down: item3, item2, item1

li.item$@3*5

@3 starts counting at 3 (3..7)

li.item$@-3*5

Count down ending at 3 (7..3)

h$[title=item$]{Header $}*3

$ works in tag, attribute and text

ul>li*3>a{Link $}

Counter follows the repeated parent

td*5

Five empty table cells

Grouping

div>(header>ul>li*2>a)+footer>p

() groups a subtree; footer stays in div

(div>dl>(dt+dd)*3)+footer>p

Nested groups, repeated dt/dd pairs

(li>a)*5

Multiply a whole group, not one tag

ul>(li>a{Item $})*4

Grouped repeat with counters

(header+main+footer)

Page skeleton as one abbreviation

table>(tr>td*3)*4

4x3 table via nested groups

(div.col)*2

Two sibling columns

section>(h2+p)*3

Repeat heading + paragraph blocks

ID, class & attributes

div#header

# sets the id attribute

div.title

. sets the class attribute

p.class1.class2.class3

Chain multiple classes

form#search.wide

Combine id and class

#page

No tag: div is implied

.card

Same: expands to div.card

td[title="Hello" colspan=3]

[] sets custom attributes

a[href=# data-id=5]

Multiple attributes, space-separated

input[type=text required]

Boolean attributes need no value

img[src=logo.png alt=Logo]

Quotes optional for simple values

Text & implicit tag names

a{Click me}

{} inserts text into the element

a{click}+b{here}

<a>click</a><b>here</b>

a>{click}+b{here}

<a>click<b>here</b></a>: b inside a

p>{Text }+a{link}+{ more}

Mix raw text nodes and elements

.wrap>.content

div is implied at block level

em>.hint

Inside inline: span is implied

ul>.item*3

Inside ul/ol: li is implied

table>.row>.col

tr and td are implied in tables

select>.opt*3

option is implied inside select

HTML boilerplate

!

Full HTML5 boilerplate (html:5)

html:5

Same: doctype, head, meta, body

!!!

Just the <!DOCTYPE html> line

meta:utf

meta:vp

Responsive viewport meta tag

link

link:css

Stylesheet link to style.css

link:favicon

Favicon link tag

script:src

doc

Document without the doctype

Common HTML abbreviations

a

a:mail

img

btn

form:post

Form with method="post"

input:email

Email input with name and id

input:password

Password input

input:checkbox / input:radio

Checkbox / radio inputs

input:submit

Submit button input

sel>opt*3

Select with three options

label+input

Label and input pair

tarea

table+

table>tr>td expanded

ol+ / ul+ / dl+

List with its first item(s)

CSS abbreviations

m10

margin: 10px;

p10-20

padding: 10px 20px;

m10-auto

margin: 10px auto;

w100 / h50

width: 100px; / height: 50px;

df

display: flex;

dib / dn

display: inline-block; / none;

pos:a / pos:r / pos:f

position absolute/relative/fixed

t0+l0

top: 0; left: 0;

fz14

font-size: 14px;

fwb / fw700

font-weight: bold / 700

c#f00

color: #f00;

bgc#fff

background-color: #fff;

bd+

border: 1px solid #000;

tac / tar

text-align: center / right

bdrs5

border-radius: 5px;

CSS values & units

m10

Integers default to px: 10px

m10p

p suffix = percent: 10%

m1.5

Floats default to em: 1.5em

m10e

e suffix = em: 10em

m10r

r suffix = rem: 10rem

m10x

x suffix = ex unit

w100p

width: 100%;

m-10

Negative value: margin: -10px;

m10-20-30-40

Four values: top right bottom left

lh1.5

line-height: 1.5em (or unitless)

fz2r

font-size: 2rem;

Vendor prefixes

-bdrs

Prefix with all vendors + plain

-wm-trf

Only -webkit- and -moz- variants

-w-bxsh

w=webkit, m=moz, s=ms, o=opera

trf:r

transform: rotate(angle);

trf:s

transform: scale(x, y);

trs

transition shorthand

anim

animation shorthand

us:n

user-select: none;

-super-foo

Unknown props get prefixed too

Wrap & editor actions

Wrap with Abbreviation

Wrap the selection in an abbreviation

ul>li*

While wrapping: one li per line

a[href=$#]{$#}

$# outputs the wrapped content

Balance (outward/inward)

Select the matching tag pair

Go to Matching Pair

Jump between open and close tags

Remove Tag

Delete a tag, keep its children

Split/Join Tag

Toggle <p></p> and <p/> forms

Toggle Comment

Comment out the current tag/rule

Increment Number by 1/10/0.1

Bump a number under the cursor

Select Next/Previous Item

Hop between tags, attrs, classes

Update Image Size

Insert real width/height of an img

Geen vermelding komt overeen met “:q”.

Over Emmet-cheatsheet

Dit Emmet-spiekbriefje zet de afkortingssyntaxis op één doorzoekbare pagina: nestoperatoren, vermenigvuldiging en nummering, groepering, ID-, klasse- en attribuutsyntaxis, tekst en impliciete tagnamen, de HTML-boilerplate, gangbare HTML-afkortingen, CSS-afkortingen, CSS-waarden en eenheden, vendor-prefixen, en de wrap- en editoracties.

Emmet verdient zich terug zodra de operatoren zitten: de tekens voor kind, broer/zus en een niveau omhoog, de vermenigvuldiging en $-nummering die een hele lijst genereren, en de CSS-afkortingen die een eigenschap en waarde uit drie letters uitbreiden. Elke rij toont de afkorting en de markup of CSS waarin ze wordt uitgebreid.

Net als elk spiekbriefje in deze groep is het gratis en werkt het aan de clientzijde: filter rijen direct met het zoekvak, spring tussen secties met de vastgepinde inhoudsopgave, kopieer elke afkorting met één klik en print de pagina als naslagwerk bij uw editor.

Hoe gebruik je Emmet-cheatsheet

Open het overzicht en bekijk de secties, van Nestoperatoren tot Wrap- & editoracties.
Zoek op een trefwoord zoals nummering, boilerplate of grid om alle rijen direct te filteren.
Spring naar CSS-afkortingen wanneer u de eigenschapsafkortingen wilt in plaats van de markupafkortingen.
Klik op een afkorting of het kopieericoon om die naar uw klembord te kopiëren en vouw ze daarna uit in uw editor.
Gebruik Afdrukken voor een papieren exemplaar van het volledige Emmet-naslagwerk.

Veelgestelde vragen

Elf secties: nestoperatoren, vermenigvuldiging en nummering, groepering, ID, klasse en attributen, tekst en impliciete tagnamen, de HTML-boilerplate, gangbare HTML-afkortingen, CSS-afkortingen, CSS-waarden en eenheden, vendor-prefixen, en wrap- en editoracties.

Ja: Emmet is ingebouwd in VS Code en wordt ook met de meeste andere moderne editors en IDE's meegeleverd, zodat de afkortingen in dit overzicht direct werken.

De sectie over vermenigvuldiging en nummering toont de *-operator met $-plaatshouders, inclusief opvulling met nullen en startverschuivingen, zodat één afkorting een genummerde lijst met elementen genereert.

Ja. Klik op een rij of op het kopieericoon en de afkorting wordt meteen gekopieerd.

Ja, het is helemaal gratis en werkt in uw browser zonder inloggen.

Populaire zoekopdrachten

emmet cheat sheet emmet abbreviations emmet html shortcuts emmet css abbreviations emmet syntax reference vs code emmet shortcuts emmet multiplication numbering

Hulp nodig?

Een probleem met deze tool gevonden? Laat het ons weten.

Een probleem melden

Voeg deze gratis tool toe aan je eigen website: kopieer en plak de onderstaande code.

<iframe src="https://tweakee.com/nl/tools/developer/emmet-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>

Emmet-cheatsheet

Nesting operators

Multiplication & numbering

Grouping

ID, class & attributes

Text & implicit tag names

HTML boilerplate

Common HTML abbreviations

CSS abbreviations

CSS values & units

Vendor prefixes

Wrap & editor actions

Over Emmet-cheatsheet

Hoe gebruik je Emmet-cheatsheet

Veelgestelde vragen

Wat behandelt het Emmet-spiekbriefje?

Werkt Emmet in VS Code?

Hoe werkt de nummeringssyntaxis?

Kan ik een afkorting met één klik kopiëren?

Is het Emmet-naslagwerk gratis?

Gerelateerde tools

Populaire zoekopdrachten

Voeg deze tool toe