Emmet - Fast HTML Writing

A navigation list with five links means typing more than a hundred characters: angle brackets, slashes, quotation marks and the same tag names over and over again. By the third such list you start making typos, and instead of building a page you are copying templates. In Ancient Egypt, scribes writing on papyrus used hieratic script instead of full hieroglyphs - a simplified, fast form of the same signs. In the world of web development, we have something similar - Emmet! It is a powerful tool built into popular code editors such as VS Code and WebStorm (and available as a plugin for others) that lets you generate HTML and CSS code using short abbreviations.

Note: the editor on the CodeWorlds platform does not expand Emmet abbreviations - Tab inserts an indent there. In the exercises, treat an abbreviation as a building plan and type the expanded code yourself, and try the expansion itself in VS Code.

Basic HTML Shortcuts

The simplest abbreviation is just a tag name. 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>

Emmet added the angle brackets and the closing tag and put the cursor inside, so you can type the content right away. The name has to be correct: from hh1 Emmet will obediently create a non-existent <hh1> element.

Child Operator (>)

The > sign works like going one floor down in a pyramid: the next element goes inside the previous one. Use it to create nested elements:

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>

The second abbreviation already uses two operators at once: > goes into the <div>, and + adds a <p> next to the <h1>. Emmet reads an abbreviation from left to right, step by step.

Sibling Operator (+)

The + sign creates elements at the same level - siblings standing side by side, not one inside another. This is how you build a page skeleton in one move:

1<!-- Type: header+main+footer + Tab -->
2<header></header>
3<main></main>
4<footer></footer>

The three semantic sections were created side by side, and none is nested in another. Emmet also has the ^ operator, which climbs one level up, and parentheses for grouping - they will come in handy once the basics become second nature.

Multiplication (*)

The asterisk * with a number repeats an element as many times as you want - no more copying five identical lines:

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>

Multiplication applies to the element right before the asterisk together with everything you nest inside it further on. That is why nav>ul>li*3>a gives one navigation, one list and three li elements, each with its own a link.

Classes (.) and IDs (#)

You add classes and identifiers with the same characters as in CSS selectors - a dot means a class, and a hash means an id:

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>

So you write an exhibition card as div.card. If you leave out the tag name and type just .card, Emmet will also create <div class="card">. The last abbreviation combines a class, multiplication and nesting, and the link got an empty href, ready to be filled in.

Text ({})

Curly braces add text inside an element, so you immediately get a finished heading or a link with content:

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>

The text from the braces lands exactly between the opening and closing tags. For a, Emmet again added an empty href - you will type the address yourself.

Numbering ($)

The dollar sign combined with multiplication generates consecutive numbers - both in a class name and in text:

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>

Each $ turns into the number of the copy: 1, 2, 3. Two dollar signs in a row give numbers with a leading zero: 01, 02, 03.

HTML5 Full Page Shortcut

The most important Emmet shortcut is the exclamation mark - it generates a complete HTML5 skeleton that you wrote by hand in the previous modules:

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>

By default Emmet inserts lang="en" and the title "Document" - change the title to a real one right away, and on a page in another language also change lang, for example to lang="pl" for Polish. In VS Code you can set the language permanently in the emmet.variables setting, adding the value "lang": "pl", and I recommend it: you configure it once, and every new page starts correctly.

My advice: do not learn all the operators at once. Start with !, > and * - these three cover most everyday work. In the next lesson you will use a validator to check whether the code you produced so quickly is correct.

Practice

In the editor below you will see Emmet abbreviations next to the code they produce. Try to predict the result before you look at the code:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Emmet - Fast HTML Writing</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Emmet in Practice</h1>
11
12    <section>
13        <h2>Emmet Shortcuts - Results</h2>
14
15        <article>
16            <h3>Shortcut: nav>ul>li*3>a{Link $}</h3>
17            <nav>
18                <ul>
19                    <li><a href="">Link 1</a></li>
20                    <li><a href="">Link 2</a></li>
21                    <li><a href="">Link 3</a></li>
22                </ul>
23            </nav>
24        </article>
25
26        <article>
27            <h3>Shortcut: header+main+footer</h3>
28            <div class="demo-layout">
29                <header class="demo">HEADER</header>
30                <main class="demo">MAIN</main>
31                <footer class="demo">FOOTER</footer>
32            </div>
33        </article>
34
35        <article>
36            <h3>Shortcut: ul.menu>li.item${Element $}*4</h3>
37            <ul class="menu">
38                <li class="item1">Element 1</li>
39                <li class="item2">Element 2</li>
40                <li class="item3">Element 3</li>
41                <li class="item4">Element 4</li>
42            </ul>
43        </article>
44
45        <article>
46            <h3>Shortcut: div.card>h3{Title}+p{Description}+a.btn{Read more}</h3>
47            <div class="card">
48                <h3>Title</h3>
49                <p>Description</p>
50                <a class="btn" href="">Read more</a>
51            </div>
52        </article>
53    </section>
54</body>
55</html>

Remember: Emmet is the web developer's hieratic script - a few characters of an abbreviation turn into full HTML hieroglyphs, and you save time for what really matters.