Emmet Cheat Sheet

Emmet is a toolkit for web developers that greatly improves HTML and CSS workflow by providing shortcuts for common code snippets. Here’s a cheat sheet for Emmet:

HTML Abbreviations

  • html:5:
    • Creates an HTML5 document structure.
  • header>ul>li*3>a:
    • Generates a header with an unordered list containing three list items with links.
  • div#container>div.item$*5:
    • Creates a div with an id “container” and five divs with class “item1,” “item2,” …, “item5.”
  • ul>li.item$*5>a[href="#"]{Item $}:
    • Produces an unordered list with five list items, each containing a link with an href and text “Item 1,” “Item 2,” …, “Item 5.”

CSS-like Selectors

  • ul#nav>li.item$*5>a{Item $}:
    • Generates an unordered list with list items containing links, similar to the HTML example.
  • table>tr>td{Value $}*4:
    • Creates a table with four rows, each containing four data cells with text “Value 1,” “Value 2,” …, “Value 16.”

Child and Sibling Combinators

  • div>p>span:
    • Creates a div containing a paragraph with a span.
  • ul>li+li+li:
    • Generates an unordered list with three list items.
  • div>p^a:
    • Produces a div with a paragraph and an anchor tag placed after the div.

Grouping and Cloning

  • ul>li.item$*3>(a{Link $}+span{Text $}):
    • Creates an unordered list with three list items, each containing an anchor tag and a span.
  • ul>li.item$*3>a{Link $}+span{Text $}^b:
    • Similar to the previous example but places a “b” tag after the entire list.

Numbering and Zeros

  • ul>li.item$$$*3:
    • Generates an unordered list with three list items, each having a unique class (item001, item002, item003).
  • ul>li.item$@-*3:
    • Creates an unordered list with three list items, each having a class with a number decreasing from 3 to 1 (item3, item2, item1).

Attributes

  • a[href='#']:
    • Creates an anchor tag with an href attribute set to ‘#.’
  • img[src='image.jpg'][alt='Image']:
    • Generates an image tag with src and alt attributes.

Text Content

  • p{Lorem ipsum $}:
    • Creates a paragraph with the text “Lorem ipsum $,” where $ is a placeholder for a number.
  • h$[title="Heading $"]:
    • Generates heading tags with a title attribute.

Math Operations

  • ul>li.item${$}*5:
    • Creates an unordered list with five list items, each containing a unique class based on the calculation.

Custom Attributes

  • input:checkbox[checked]{Check me}:
    • Generates a checkbox input with the checked attribute and label text “Check me.”

Multiline Editing

  • ul>li.item$*3\n\t>span:
    • Creates an unordered list with three list items, each containing a span. The \n\t represents a newline and tab.

Reference

  • div>(header>ul>li*2>a)+footer>p:
    • Creates a div containing a header with a list, followed by a footer with a paragraph.

Note

  • To expand Emmet abbreviations, press the Tab key.

Emmet provides a powerful and efficient way to write HTML and CSS. This cheat sheet covers a range of Emmet features, but there are more advanced features and options available.