10 Essential Emmet Shortcuts

If you prefer watching instead of reading, check out this video:

Blog version:

Hey everyone, and welcome back! Today, we're diving into the world of Emmet, a suite of powerful shortcuts that significantly enhance workflow efficiency. Mastering Emmet shortcuts not only saves time but also streamlines the development process, allowing to focus more on creativity and problem-solving. In this tutorial, we'll delve into 10 essential Emmet shortcuts that every web developer should know. Let’s get right into it!

1. HTML Boilerplate

Emmet simplifies the process of creating an HTML boilerplate code. Simply type ! and then press TAB to insert the basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

This shortcut eliminates the need to manually write repetitive HTML code, allowing developers to jumpstart their projects swiftly.

2. Child nesting operator

The > operator in Emmet allows for easy nesting of elements within each other. For instance:

div>ul>li

will generate:

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

3. Sibling nesting operator

To place elements adjacent to each other on the same level, Emmet provides the + operator:

h2+p

will yield:

<h2></h2>
<p></p>

4. Climb up nesting operator

The climb-up ^ operator facilitates moving up one level in nesting:

h2>strong^button

results in:

<h2>
	<strong></strong>
</h2>
<button></button>

5. Text insertion

Curly braces {} in Emmet allow for easy insertion of text within elements:

h2{heading}

produces:

<h2>heading</h2>

Even HTML elements can be nested within text content:

p>{Click }+a{here}+{ to continue}

outputs:

<p>Click <a href="">here</a> to continue</p>

6. Classes and IDs

Emmet simplifies the creation of classes and IDs in HTML:

• div.class generates <div class="class"></div>
• div#id generates <div id="id"></div>
• div#id.class generates <div id="id" class="class"></div>

7. Multiplication

Using the * operator, you can generate multiple elements effortlessly:

ul>li*5

creates:

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

8. Item numbering

Combine multiplication * with $ for numbered elements:

ul>li{Item $}*5

…will produce

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

You can also use $ on attributes, classes and ids.

9. CSS Abbreviations

Emmet's prowess extends to CSS, which is my favorite part of this tutorial, offering shortcuts for various properties:

• m for margin
• p for padding
• d for display: block
• c for color

Combining them with values enhances efficiency, such as m0 for margin: 0 and m0-a for margin: 0 auto.

You can combine it with sibling operator and add multiple CSS declarations:

df+aic+jcc

produce:

display: flex;
align-items: center;
justify-content: center;

Here’s one more example:

posa+t0+l0+r0+b0+w100p+h100p

generates:

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;

As you can see, 100p is expanded into 100%. The same works with em and rem units:

1e → 1em

1r → 1rem

10. Emmet in JSX

Emmet seamlessly integrates with JSX and works in the same way:

<div>
  <button></button>
</div>

It even partially supports styled-components, although some features might be limited.

Still, it's a valuable tool for faster and more efficient React development.

Emmet is a game-changer for web development. By mastering these essential shortcuts, you can write code faster, cleaner, and with less effort. Remember to explore the official documentation and cheat sheet for even more advanced features. I’ll leave the links in the description.

Don't forget to hit the like button if you found this tutorial helpful, and consider subscribing to our channel for more insightful content on web development tools and techniques. Your support encourages us to create more valuable tutorials to help you advance in your coding journey. Happy coding, and see you in the next video!