Published Jun 27 2018
⚠️⚠️ JUST A FEW HOURS LEFT to JOIN THE 2023 BOOTCAMP ⚠️⚠️
id
and class
attributeshead
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.
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:
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.
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>
>
means child+
means siblingnav>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>
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>
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>
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
attributesid
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>
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>
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>
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>
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>
head
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> |
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> |
Abbreviation | Rendered html |
---|---|
mn | <main></main> |
sect | <section></section> |
art | <article></article> |
hdr | <header></header> |
ftr | <footer></footer> |
adr | <address></address> |
str | <strong></strong> |
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> |
© 2023 Flavio Copes
using
Notion to Site
Interested in solopreneurship?