10 Emmet Abbreviations That Will Instantly Speed Up Your HTML

Watch an experienced developer build a page skeleton and you will see something almost magical: they type a few characters, press Tab, and an entire block of HTML appears. That is Emmet — a shorthand language built into most modern editors, including CodeLive Studio. Most beginners never learn more than one or two abbreviations, which means they spend hours typing markup that could be generated in seconds.

Here are the ten abbreviations I use every single day, roughly in the order you will need them. Open the editor and type along — each example expands the moment you press Tab.

1. The HTML5 skeleton: !

Type an exclamation mark and press Tab. You get a complete HTML5 document — DOCTYPE, head, meta tags, body. This one abbreviation saves you from typing boilerplate on every new page for the rest of your career.

!  + Tab

2. Child elements: >

The greater-than sign nests one element inside another. This is the backbone of most abbreviations you will write.

nav>ul>li

<!-- expands to -->
<nav>
  <ul>
    <li></li>
  </ul>
</nav>

3. Siblings: +

The plus sign creates elements at the same level. Combine it with nesting to build common patterns in one breath.

header+h1+p

<!-- expands to -->
<header></header>
<h1></h1>
<p></p>

4. Repetition: *

The asterisk multiplies an element. Three list items, five cards, ten rows — never type the same tag twice again.

ul>li*3

<!-- expands to -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

5. Classes and IDs: . and #

A dot sets a class, a hash sets an id, and they chain naturally. If the abbreviation starts with a class or id, Emmet even guesses the tag — .card becomes a div, ul.list stays a ul.

div.wrapper>img.avatar+p#intro

<!-- expands to -->
<div class="wrapper">
  <img src="" alt="" class="avatar">
  <p id="intro"></p>
</div>

6. Numbered items: $

The dollar sign becomes an incrementing number inside repeated elements. Perfect for ordered content, and you can pad it with zeros using $$.

li.item$$*3

<!-- expands to -->
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>

7. Text content: {}

Curly braces put text inside the element. Combined with multiplication this generates finished markup, not just empty shells.

p{Hello world}

<!-- expands to -->
<p>Hello world</p>

8. Lorem ipsum: lorem

Type lorem and press Tab for a paragraph of placeholder text. Add a number — lorem8 — for exactly eight words. It works inside repetition too: p*3>lorem gives you three filled paragraphs.

9. Grouping: ()

Parentheses let you repeat a whole group, which is how you build card grids and list sections in a single line.

(div.card>img+h3{Item})*3

<!-- expands to three complete cards -->

10. Climb and shortcuts: ^ and element hints

The caret climbs back up one level in the tree, and type hints expand into fully attributed elements. A few of my favourites:

• input:email → <input type="email" required>
• a:mail → <a href="mailto:"></a>
• btn → <button></button>
• meta:vp → the responsive viewport meta tag

Where to practise

Emmet is muscle memory, not knowledge — reading a cheat sheet will not make it stick, but ten minutes of typing will. Open the CodeLive Studio editor, type each abbreviation from this list, press Tab, and look at what appeared. By the time you reach number ten you will already be writing HTML two or three times faster than this morning.