/

Emmet Tutorial: Write HTML Faster with Emmet

Emmet Tutorial: Write HTML Faster with Emmet

Emmet is an incredibly useful tool that allows you to write HTML at lightning speed. It’s like magic! Emmet has been around for years and there are plugins available for every editor out there. In this tutorial, we will explore some of the key features of Emmet and learn how to use it effectively.

Table of Contents

Create an HTML file from scratch

To create an HTML file from scratch, simply type ! and you will get a basic HTML boilerplate to work with:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
</head>
<body>

</body>
</html>

Using > and +

Emmet uses > to denote a child element and + to denote a sibling element. For example:

1
2
3
4
5
6
7
nav>ul>li

<nav>
 <ul>
 <li></li>
 </ul>
</nav>
1
2
3
4
5
div+p+span

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

You can also combine these operators to create more complex markup. VS Code provides a convenient preview of the Emmet snippet:

1
2
3
4
5
6
7
8
9
ul>li>div+p+span

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

Level up

Using the ^ operator, you can level up from any child element created using >:

1
2
3
4
5
6
7
8
9
ul>li>div+p^li>span

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

You can use ^ multiple times to level up more than once:

1
2
3
4
5
6
7
8
9
ul>li>div+p^^p

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

Multipliers

Emmet allows you to add multiple instances of a tag using the * operator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>

Grouping expressions

When dealing with multiplication and more complex expressions, you can use parentheses ( ) to group elements:

1
2
3
4
5
6
7
8
9
10
ul>li>(p+span)*2

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

Working with id and class attributes

The id and class attributes are commonly used in HTML. Emmet allows you to include them using a CSS-like syntax:

1
2
3
4
5
6
7
ul>li>p.text#first

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

You can include multiple classes as well:

1
2
3
4
5
6
7
ul>li>p.text.paragraph#first

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

Adding unique classes or ids

The id attribute must be unique on a page, while class can be repeated. If you want to assign an incremental class or id to your elements, you can use the $ symbol:

1
2
3
4
5
6
7
8
9
10
ul>li.item$*2>p

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

Adding other attributes

To add attributes other than class and id, use square brackets []:

1
2
3
4
5
6
7
8
9
10
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 attributes at once:

1
2
3
4
5
6
7
8
9
10
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

Emmet allows you to easily add content to HTML elements:

1
2
3
4
5
6
7
8
9
10
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

You can also add an incremental number to your markup:

1
2
3
4
5
6
7
8
9
10
ul>li.item$*2>p{Text $}

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

By default, the number starts at 1. You can specify a different starting number:

1
2
3
4
5
6
7
8
9
10
ul>[[email protected]](/cdn-cgi/l/email-protection)*2>p{Text [[email protected]](/cdn-cgi/l/email-protection)}

<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

Here is a reference for commonly used tags in the head section of an HTML page:

Abbreviation Rendered 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

Here is a reference for commonly used HTML tags:

Abbreviation Rendered 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

Here is a reference for commonly used semantic HTML tags:

Abbreviation Rendered 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

Here is a reference for commonly used form elements:

Abbreviation Rendered 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>

In this tutorial, we have covered the basics of Emmet and explored various features to help you write HTML more efficiently. Emmet is an incredibly powerful tool that can speed up your development process. Give it a try and see how it can enhance your workflow!

tags: [“SEO”, “HTML”, “web development”, “Emmet”]