# 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 ```xml ! ``` ### It Turns into ```xml Document ``` This I super useful in getting a boiler plate html for the app up and running. --- ## Example #2: any tag ### I Write ```xml a ``` ### It Turns into ```xml ``` 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 ```xml span.pink ``` ### It Turns into ```xml ``` similarly… ### I Write ```xml span#chosen ``` ### It Turns into ```xml ``` if we wanna add two classes “class-1” and “class-2” along with and id “id-1” to the div. ### I Write ```xml div.class-1.class-2#id-1 ``` ### It Turns into ```xml
``` 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 ```xml .class-1.class-2#id-1 ``` ### It Turns into ```xml
``` --- ## Example #4: attributes You can even write attributes and values with \[\] ### I Write ```xml button[type="button"] ``` ### It Turns into ```xml ``` --- ## Example #5: Child Elements use the ‘>’ ### I Write ```xml div.pink>p.cyan ``` ### It Turns into ```xml

``` we can also have multiple children with ‘\*’ ### I Write ```xml header>nav>ul>li*3 ``` ### It Turns into ```xml
``` --- ## Example #6: Text Inside Elements use {} and write the text inside after specifying the tag. ### I Write ```xml p{Privacy is eesntial for democracy} ``` ### It Turns into ```xml

Privacy is eesntial for democracy

``` If we say want a sequence of numbers in list, we can use the ‘$’ where we want the iterator to appear. ### I Write ```xml ul>li*5{Item $} ``` ### It Turns into ```xml ``` the $ isn’t limited to text inside the element tho, we can also write classes, ids,etc.. ### I Write ```xml ul>li*3#id-$ ``` ### It Turns into ```xml ``` If we add more $, like $$$ it will ‘zero pad’ out numbers, basically allowing space for bigger numbers. ### I Write ```xml ul>li*3{Item-$$$} ``` ### It Turns into ```xml ``` --- ## Example #7: siblings Use the ‘+’ to write all siblings at once. ### I Write ```xml header+nav+footer ``` ### It Turns into ```xml
``` say we want a nav child inside header.. ### I Write ```xml header>nav+main+footer ``` ### It Turns into ```xml
``` Not really what we expected, in these cases its better to use () ### I Write ```xml (header>nav)+main+footer ``` ### It Turns into ```xml
``` Other than these emmet is super handy in auto filling and giving suggestions both in HTML and CSS.