Home / Tech / Emmet

Tech

Emmet cheat sheet

Emmet cheat sheet. Explore our ultimate quick reference for Emmet.

Discover the power of Emmet with our comprehensive cheat sheet, designed to accelerate your HTML and CSS coding to unprecedented speeds. Master shortcuts for creating complex HTML structures and stylish CSS properties with ease. This indispensable guide is your key to a more efficient and productive web development workflow.

Basic Operations

Child: >

Creates a child element.

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

Sibling: +

Creates a sibling element.

div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

Climb-up: ^

Moves up one level in the hierarchy.

div+div>p>span+em^bq
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Grouping: ()

Groups elements together to apply a shared operation.

div>(header>ul>li*2>a)+footer>p
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Multiplication: *

Repeats an element multiple times.

ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Advanced Techniques

IDs and Classes: . #

Specifies ID and class attributes.

#header
.title
form#search.wide
<div id="header"></div>
<div class="title"></div>
<form id="search" class="wide"></form>

Numbering: $

Generates item numbers, including advanced numbering options.

ul>li.item$*3
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

Attributes: []

Adds custom attributes to elements.

a[href="https://example.com"]
<a href="https://example.com"></a>

Text: {}

Inserts text content into an element.

a{Click me}
<a href="">Click me</a>

Implicit Tag Names

Automatically determines the tag name based on class or ID.

.class
em>.class
<div class="class"></div>
<em><span class="class"></span></em>

Resources

For a more detailed exploration of Emmet syntax and capabilities, visit:

LISTEN