We use cookies to enhance your experience on the site
Emmet - Fast HTML Writing
In Ancient Egypt, scribes used abbreviated hieroglyphs to write faster. In the world of web development, we have something similar - Emmet! It is a powerful tool built into most code editors (VS Code, WebStorm, Sandpack) that lets you generate HTML and CSS code using short abbreviations.
Basic HTML Shortcuts
Instead of writing the entire tag by hand, just type the shortcut and press Tab:
1<!-- Type: h1 + Tab -->
2<h1></h1>
3
4<!-- Type: p + Tab -->
5<p></p>
6
7<!-- Type: div + Tab -->
8<div></div>Child Operator (>)
Use the
>1<!-- Type: nav>ul>li + Tab -->
2<nav>
3 <ul>
4 <li></li>
5 </ul>
6</nav>
7
8<!-- Type: div>h1+p + Tab -->
9<div>
10 <h1></h1>
11 <p></p>
12</div>Sibling Operator (+)
The
+1<!-- Type: header+main+footer + Tab -->
2<header></header>
3<main></main>
4<footer></footer>Multiplication (*)
The asterisk
*1<!-- Type: ul>li*5 + Tab -->
2<ul>
3 <li></li>
4 <li></li>
5 <li></li>
6 <li></li>
7 <li></li>
8</ul>Classes (.) and IDs (#)
Add classes and IDs just like in CSS:
1<!-- Type: div.container + Tab -->
2<div class="container"></div>
3
4<!-- Type: h1#title + Tab -->
5<h1 id="title"></h1>
6
7<!-- Type: ul.menu>li.item*3>a + Tab -->
8<ul class="menu">
9 <li class="item"><a href=""></a></li>
10 <li class="item"><a href=""></a></li>
11 <li class="item"><a href=""></a></li>
12</ul>Text ({})
Curly braces add text inside an element:
1<!-- Type: h1{Welcome to Egypt!} + Tab -->
2<h1>Welcome to Egypt!</h1>
3
4<!-- Type: a{Click here} + Tab -->
5<a href="">Click here</a>Numbering ($)
The dollar sign generates numbers:
1<!-- Type: ul>li.item${Item $}*3 + Tab -->
2<ul>
3 <li class="item1">Item 1</li>
4 <li class="item2">Item 2</li>
5 <li class="item3">Item 3</li>
6</ul>HTML5 Full Page Shortcut
The most important Emmet shortcut - generates a complete HTML skeleton:
1<!-- Type: ! + Tab -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8</head>
9<body>
10
11</body>
12</html>