Emmet - write faster html
Emmet is basically small snips of code you can write that will transform into bigger chunks of codes soon as you press enter, it’s a way to speed up manual code typing.
Emmet is built into VS code so no need to install anything..
In this blog we will follow “I Write :” and “It turns into :" for every emmet shortcut.
Example #1: Boiler Plate
I Write
!
It Turns into
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
This I super useful in getting a boiler plate html for the app up and running.
Example #2: any tag
I Write
a
It Turns into
<a href=""></a>
basically any tag you write it will automatically add the brackets and closing tags if required, along with necessary attributes.
Example #3: Class and Id
Say we want to create a span tag with class “pink” and id “chosen”
I Write
span.pink
It Turns into
<span class="pink"></span>
similarly…
I Write
span#chosen
It Turns into
<span id="chosen"></span>
if we wanna add two classes “class-1” and “class-2” along with and id “id-1” to the div.
I Write
div.class-1.class-2#id-1
It Turns into
<div class="class-1 class-2" id="id-1"></div>
div is a bit special in emmet, as in VS code already knows it’s the most commonly used tag so you it assumes div by default even if you skip it.
I Write
.class-1.class-2#id-1
It Turns into
<div class="class-1 class-2" id="id-1"></div>
Example #4: attributes
You can even write attributes and values with []
I Write
button[type="button"]
It Turns into
<button type="button"></button>
Example #5: Child Elements
use the ‘>’
I Write
div.pink>p.cyan
It Turns into
<div class="pink">
<p class="cyan"></p>
</div>
we can also have multiple children with ‘*’
I Write
header>nav>ul>li*3
It Turns into
<header>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
Example #6: Text Inside Elements
use {} and write the text inside after specifying the tag.
I Write
p{Privacy is eesntial for democracy}
It Turns into
<p>Privacy is eesntial for democracy</p>
If we say want a sequence of numbers in list, we can use the ‘$’ where we want the iterator to appear.
I Write
ul>li*5{Item $}
It Turns into
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
the $ isn’t limited to text inside the element tho, we can also write classes, ids,etc..
I Write
ul>li*3#id-$
It Turns into
<ul>
<li id="id-1"></li>
<li id="id-2"></li>
<li id="id-3"></li>
</ul>
If we add more $, like $$$ it will ‘zero pad’ out numbers, basically allowing space for bigger numbers.
I Write
ul>li*3{Item-$$$}
It Turns into
<ul>
<li>Item-001</li>
<li>Item-002</li>
<li>Item-003</li>
</ul>
Example #7: siblings
Use the ‘+’ to write all siblings at once.
I Write
header+nav+footer
It Turns into
<header></header>
<nav></nav>
<footer></footer>
say we want a nav child inside header..
I Write
header>nav+main+footer
It Turns into
<header>
<nav></nav>
<main></main>
<footer></footer>
</header>
Not really what we expected, in these cases its better to use ()
I Write
(header>nav)+main+footer
It Turns into
<header>
<nav></nav>
</header>
<main></main>
<footer></footer>
Other than these emmet is super handy in auto filling and giving suggestions both in HTML and CSS.
