Emmet Cheatsheet - Emmet Abbreviation & Syntax Reference

lorem10 emits ten words of Latin-style filler, and the trailing number sets the length directly, so you can stretch or shrink the placeholder to an exact size. lorem-cn produces Chinese filler, which matches the shape and word rhythm of a real Chinese interface mockup — but it depends on plugin support and is not available everywhere by default. Both simply inject text into element content, so they belong on p, div or span. If the block itself needs to repeat, multiply it: lorem*3.

Long abbreviations get hard to read because scope becomes guesswork, and parentheses let you fence off sections that parse independently. A representative form is (#header>ul>li*2>a)+footer>p: the parenthesised part builds the ID-bearing header structure, and the trailing +footer>p attaches the footer as its sibling. Without the grouping you have to remember how far the # reaches and count the closing ^ symbols by hand. Fenced, each chunk can be verified on its own, which makes long skeletons far more predictable.

Wrap the attributes in square brackets and separate them with spaces: a[href="#" title="link"] expands into an anchor carrying both attributes. Always quote values with double quotes — that is what keeps the parser honest when the value itself contains spaces or symbols. Unquoted values break as soon as they do. You can also mix shorthand forms for class and id alongside explicit attributes, but keep in mind that attribute shorthand and {} text interpolation are separate mechanisms: do not expect a brace expression inside the bracket to evaluate.

{Hello} is plain text interpolation — the braced content lands verbatim in the element text position with no numbering involved. ${Item} adds an incrementing counter: inside a multiplication or list structure the number follows its position, producing Item 1, Item 2, Item 3. The digits come from the $ placeholder used inside the text interpolation, and a $@- variant generates the same sequence in reverse. Reach for {} when you want fixed placeholder copy, and for ${} only when you need a run of numbered items.

Each one is a common tag pre-loaded with the attribute people most often forget. form:post yields a form carrying method="post". input:email produces <input type="email"> and input:text produces <input type="text">, and the type attribute is what lets the browser apply email-format validation and pick the right mobile keyboard. btn:submit gives <button type="submit"></button>; buttons default to submit anyway, so writing it out matters mainly in files full of type="button" buttons where an accidental submit would bite. Using this family repeatedly across a form is far quicker than typing full tags.