Skip to content

Emmet Tutorial

New Course Coming Soon:

Get Really Good at Git

Emmet is a pretty cool tool that helps you write HTML very very fast. It's like magic. Emmet is not something new, it's been around for years and there is a plugin for every editor out there.

Emmet is a pretty cool tool that helps you write HTML very very fast.

It’s like magic.

Emmet is not something new, it’s been around for years and there is a plugin for every editor out there. On VS Code, Emmet is integrated out of the box, and whenever the editor recognizes a possible Emmet command, it will show you a tooltip.

Emmet in VS Code

If the thing you write has no other interpretations, and VS Code thinks it must be an Emmet expression, it will preview it directly in the tooltip, nicely enough:

Emmet preview in VS Code

Yet I didn’t really know how to use it in all its intricacies until I set out to research and write about it, so I had to learn how to use it in depth.

I want to use it in my day to day work, so here’s what I learned about it.

Create an HTML file from scratch

Type ! and you will get a basic HTML boilerplate to work with:

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

</body>
</html>

> and +

nav>ul>li

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

div+p+span

<div></div>
<p></p>
<span></span>

You can combine those to perform more complex markups. VS Code is so nice to show a preview when the Emmet snippet has no

ul>li>div+p+span

<ul>
    <li>
        <div></div>
        <p></p>
        <span></span>
    </li>
</ul>

Level up

Using ^ you can level up from any time you used > to create a children:

ul>li>div+p^li>span

<ul>
    <li>
        <div></div>
        <p></p>
    </li>
    <li><span></span></li>
</ul>

You can use it multiple times to “up” more than once:

ul>li>div+p^^p

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

Multipliers

Any tag can be added multiple times using *:

ul>li*5>p

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

Group an expression to make it more readable

With multiplication in the mix, things start to get a bit more complex. What if you want to multiply 2 items? You group them in parentheses ( ):

ul>li>(p+span)*2

<ul>
    <li>
        <p></p>
        <span></span>
        <p></p>
        <span></span>
    </li>
</ul>

id and class attributes

id and class are probably the most used attributes in HTML.

You can create an HTML snippet that includes them by using a CSS-like syntax:

ul>li>p.text#first

<ul>
    <li>
        <p class="text" id="first"></p>
    </li>
</ul>

You can add multiple classes:

ul>li>p.text.paragraph#first

<ul>
    <li>
        <p class="text paragraph" id="first"></p>
    </li>
</ul>

Adding an unique class or id

id must be unique in your page, at any time.

class can be repeated, but sometimes you want an incremental one for your elements.

You can do that using $:

ul>li.item$*2>p

<ul>
    <li class="item1">
        <p></p>
    </li>
    <li class="item2">
        <p></p>
    </li>
</ul>

Other attributes

Attributes other than class and id must be added using [] parentheses:

ul>li.item$*2>p[style="color: red"]

<ul>
    <li class="item1">
        <p style="color: red"></p>
    </li>
    <li class="item2">
        <p style="color: red"></p>
    </li>
</ul>

You can add multiple attribute at once:

ul>li.item$*2>p[style="color: red" title="A color"]

<ul>
    <li class="item1">
        <p style="color: red" title="A color"></p>
    </li>
    <li class="item2">
        <p style="color: red" title="A color"></p>
    </li>
</ul>

Adding content

Of course you can also fill the HTML with content:

ul>li.item$*2>p{Text}

<ul>
    <li class="item1">
        <p>Text</p>
    </li>
    <li class="item2">
        <p>Text</p>
    </li>
</ul>

Adding an incremental number in your markup

You can add an incremental number in the text:

ul>li.item$*2>p{Text $}

<ul>
    <li class="item1">
        <p>Text 1</p>
    </li>
    <li class="item2">
        <p>Text 2</p>
    </li>
</ul>

That number normally starts at 1, but you can make it start at an arbitrary number:

ul>li.item$@10*2>p{Text $@3}

<ul>
    <li class="item10">
        <p>Text 3</p>
    </li>
    <li class="item11">
        <p>Text 4</p>
    </li>
</ul>

A reference for tags used in the page head

AbbreviationRendered html
link<link rel="stylesheet" href="" />
link:css<link rel="stylesheet" href="style.css" />
link:favicon<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:rss<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
meta:utf<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:vp<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
style<style></style>
script<script></script>
script:src<script src=""></script>

A reference for common tags

AbbreviationRendered html
img<img src="" alt="" />
a<a href=""></a>
br<br />
hr<hr />
c<!-- -->
tr+<tr><td></td></tr>
ol+<ol><li></li></ol>
ul+<ul><li></li></ul>

A reference for semantic HTML tags

AbbreviationRendered html
mn<main></main>
sect<section></section>
art<article></article>
hdr<header></header>
ftr<footer></footer>
adr<address></address>
str<strong></strong>

A reference for form elements

AbbreviationRendered html
form<form action=""></form>
form:get<form action="" method="get"></form>
form:post<form action="" method="post"></form>
label<label for=""></label>
input<input type="text" />
inp<input type="text" name="" id="" />
input:hidden, input:h<input type="hidden" name="" />
input:text, input:t<input type="text" name="" id="" />
input:search<input type="search" name="" id="" />
input:email<input type="email" name="" id="" />
input:url<input type="url" name="" id="" />
input:password, input:p<input type="password" name="" id="" />
input:datetime<input type="datetime" name="" id="" />
input:date<input type="date" name="" id="" />
input:datetime-local<input type="datetime-local" name="" id="" />
input:month<input type="month" name="" id="" />
input:week<input type="week" name="" id="" />
input:time<input type="time" name="" id="" />
input:tel<input type="tel" name="" id="" />
input:number<input type="number" name="" id="" />
input:color<input type="color" name="" id="" />
input:checkbox, input:c<input type="checkbox" name="" id="" />
input:radio, input:r<input type="radio" name="" id="" />
input:range<input type="range" name="" id="" />
input:file, input:f<input type="file" name="" id="" />
input:submit, input:s<input type="submit" value="" />
input:image, input:i<input type="image" src="" alt="" />
input:button, input:b<input type="button" value="" />
input:reset<input type="reset" value="" />
button:submit, button:s, btn:s<button type="submit"></button>
button:reset, button:r, btn:r<button type="reset"></button>
button:disabled, button:d, btn:d<button disabled="disabled"></button>
btn<button></button>
fieldset:disabled, fieldset:d, fset:d, fst:d<fieldset disabled="disabled"></fieldset>
fst, fset<fieldset></fieldset>
optg<optgroup></optgroup>
select<select name="" id=""></select>
select:disabled, select:d<select name="" id="" disabled="disabled"></select>
select+<select name="" id=""><option value=""></option></select>
option, opt<option value=""></option>
table+<table><tr><td></td></tr></table>
textarea<textarea name="" id="" cols="30" rows="10"></textarea>
tarea<textarea name="" id="" cols="30" rows="10"></textarea>
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching Summer 2024. Join the waiting list!

Here is how can I help you: