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
- Using > and +
- Level up
- Multipliers
- Grouping expressions
- Working with id and class attributes
- Adding unique classes or ids
- Adding other attributes
- Adding content
- Adding an incremental number
- A reference for tags used in the page
head
- A reference for common tags
- A reference for semantic HTML tags
- A reference for form elements
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:
<!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:
nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
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:
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 >
:
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:
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:
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:
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:
ul>li>p.text#first
<ul>
<li>
<p class="text" id="first"></p>
</li>
</ul>
You can include multiple classes as well:
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:
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 []
:
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:
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:
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:
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:
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!