Emmet Cheat Sheet - Generate HTML & CSS Snippets Faster - tools Cheatsheets

Emmet: The Essential Toolkit for Web Developers

Emmet is a powerful productivity toolkit for web developers that significantly speeds up HTML and CSS coding by allowing you to write short abbreviations that expand into full code snippets. This cheat sheet provides a comprehensive guide to mastering Emmet's syntax and features.

Getting Started with Emmet

Emmet is typically integrated into most modern text editors and IDEs. If you encounter issues, consult the official Emmet installation guide for your specific editor: Emmet Installation Instructions.

Emmet Usage Methods

You can utilize Emmet in two primary ways:

Tab Expansion: Type your Emmet abbreviation and press the Tab key to expand it into code.
Interactive Mode: Press Alt + Ctrl + Enter (or your editor's shortcut) to activate interactive expansion, generating snippets as you type.

This cheat sheet will primarily demonstrate the Tab Expansion method.

HTML Snippet Generation with Emmet Generating HTML5 Doctype and Structure

Use html:5 to quickly generate a standard HTML5 document structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

Creating Child Elements with `>`

The `>` operator creates nested elements. For example, ul>li>p will generate a `ul` containing an `li`, which in turn contains a `p` tag.

<ul>
  <li>
    <p></p>
  </li>
</ul>

Creating Sibling Elements with `+`

The `+` operator creates adjacent (sibling) elements. For instance, html>head+body generates an `html` tag with a `head` and a `body` tag as siblings.

<html>
<head></head>
<body>

</body>
</html>

Multiplication of Elements with `*`

Use the `*` operator to repeat elements. ul>li*5 will create an unordered list with five list items.

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Grouping Elements with `()`

Parentheses `()` allow you to group elements for complex structures. For example, table>(tr>th*5)+tr>t*5 creates a table with a header row and a body row, each with multiple cells.

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <t></t>
    <t></t>
    <t></t>
    <t></t>
    <t></t>
  </tr>
</table>

Adding Classes and IDs with `.` and `#`

Use a dot `.` for classes and a hash `#` for IDs. These can be combined with element names or used independently.

div.heading

<div class="heading"></div>

div#heading

<div id="heading"></div>

Combine them: div#heading.center

<div id="heading" class="center"></div>

Adding Content Inside Tags with `{}`

Enclose text within curly braces `{}` to add content to an element. For example, h1{Emmet is awesome}+h2{Every front end developer should use this}+p{This is paragraph}*2.

<h1>Emmet is awesome</h1>
<h2>Every front end developers should use this</h2>
<p>This is paragraph</p>
<p>This is paragraph</p>

Adding Attributes to HTML Tags with `[]`

Attributes are added within square brackets `[]`. For example, a[href=https://google.com data-toggle=something target=_blank].

<a href="https://google.com" data-toggle="something" target="_blank"></a>

Numbering Elements with `$`

The `$` symbol is used for numbering elements. It can be used within tag names, attributes, or content. For example, h${This is so awesome $}*6.

<h1>This is so awesome 1</h1>
<h2>This is so awesome 2</h2>
<h3>This is so awesome 3</h3>
<h4>This is so awesome 4</h4>
<h5>This is so awesome 5</h5>
<h6>This is so awesome 6</h6>

Use @- for reverse numbering. For example, img[[email protected]]*5.

<img src="image05.jpg" alt="">
<img src="image04.jpg" alt="">
<img src="image03.jpg" alt="">
<img src="image02.jpg" alt="">
<img src="image01.jpg" alt="">

To start numbering from a specific number, use the format $@startNumber. For example, img[[email protected]]*5.

<img src="emmet100.jpg" alt="">
<img src="emmet101.jpg" alt="">
<img src="emmet102.jpg" alt="">
<img src="emmet103.jpg" alt="">
<img src="emmet104.jpg" alt="">

Useful Emmet Tips and Abbreviations

Expand Known Abbreviations: Use a colon `:` to expand common abbreviations.

input:date

<input type="date" name="" id="">

form:post

<form action="" method="post"></form>

link:css

<link rel="stylesheet" href="style.css">

Building Navigation Bars: Emmet simplifies complex structures like navigation bars.

.navbar>ul>li*3>a[href=#]{Item $@-}

<div class="navbar">
  <ul>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 1</a></li>
  </ul>
</div>

CSS Snippet Generation with Emmet

Emmet is equally effective for generating CSS properties and values.

Float Properties: Use `f:` followed by direction.
f:l
```
float: left;
```
Options include `n` (none), `r` (right), `l` (left).
Position Properties: Use `pos:` followed by type.
pos:a
```
position: absolute;
```
Options include `a` (absolute), `r` (relative), `f` (fixed).
Display Properties: Use `d:` followed by type.
d:ib
```
display: inline-block;
```
Common options: `n` (none), `b` (block), `f` (flex), `i` (inline), `ib` (inline-block).
Margin and Padding: Use `m` for margin and `p` for padding, followed by direction (e.g., `mr` for `margin-right`, `pr` for `padding-right`).
Font Face: Use `@f` to generate the `@font-face` rule.
@f
```
@font-face {
  font-family:;
  src:url();
}
```

Common CSS Shorthands

Shorthand	Description
z	z-index
w	width
h	height
fz	font-size
ff	font-family
fw	font-weight
lh	line-height
maw	max-width
mah	max-height
miw	min-width
mih	min-height
!	!important
@f	font-face
@op	opacity

Further Resources