Supercharge HTML/CSS Coding in IDEA with Emmet Shortcuts

Emmet Overview

Emmet (originally Zen Coding) is a productivity tool for front‑end developers that expands CSS‑style abbreviations into full HTML, XML, or CSS code. It is bundled with IntelliJ IDEA and can also be installed in editors such as Sublime Text or Eclipse.

Basic Usage in IntelliJ IDEA

In an HTML or CSS file type an abbreviation and press Tab. IDEA expands the abbreviation into the corresponding markup.

Example without Emmet

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

Example with Emmet

Typing ul>li*5 and pressing Tab produces the same markup as above.

Common Emmet Syntax

Descendant (>)

The > operator creates a child relationship.

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

Sibling (+)

The + operator places elements side‑by‑side at the same hierarchy level.

<div></div>
<p></p>
<span></span>

Parent (^)

The ^ operator moves the cursor up one level in the hierarchy.

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Multiplication (*)

The * operator repeats an element a specified number of times.

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

ID and Class

Use # for IDs and . for classes.

<div id="header"></div>

<div class="title"></div>

<p class="class1 class2 class3"></p>

For a complete list of abbreviations, see the official Emmet cheat sheet: http://docs.emmet.io/cheat-sheet/.