Boost your HTML and CSS writing with Emmet

Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL and other structured code formats via content assist. Emmet lets you write less code and do more. In VSCode you can use Emmet without installing it. If you want to get Emmet for other editors like Notepad++, Atom, Sublime text etc you can download and install it.

• Basic HTML template: Instead of writing html, header, title, body tag one by one you can simply write ! and press tab. This will make a basic template for you.

• Complete html tag: If you want to make a header 1, instead of doing hard code <h1></h1> like this you can type h1 and hit enter, and emmet will create the header 1 tag with closer for you. You can do this for all the HTML tags instead of writing the whole tag by yourself. All you need to write the name of the tag. e.g. div -> <div></div>, header -> <header></header>, p -> <p></p> and so on.

• Tags with class: If you want to make a class inside a div you can write .myDiv and hit enter. It will create a div with a class named myDiv. By default anything after dot (.) creates class for a div. You can also do the same for other tags. Write tagName.className and it'll create the class for the specific tag. Lets say, you want to make a class for header 1. Just type h1.myHeader and hit enter
  

<div class="myDiv"></div>
<h1 class="myHeader"></h1>
<h2 class="myHeader"></h2>
<p class="myParagraph"></p>
<span class="mySpan"></span>
<b class="myBold"></b>

and so on.

• Tags with id: Sometimes you may want to give an id to a div. You can do it easily just by pressing #id. Its the same as the class but instead of dot(.) sign you need to use hash(#) sign. Like this h1#header1

<div id="id"></div>
<h1 id="header1"></h1>
<h2 id="myHeader"></h2>
<p id="myParagraph"></p>
<span id="mySpan"></span>
<b id="myBold"></b>

and so on.

• More than one class onto the same element: You can create more than one class or id onto the same element. For this you need to write class1.class2 and it will give you

<div class="class1 class2"></div>

If you want to create two class and a id at a time you can simply write class1.class2#myId and hit enter. This will provide you two classes with a id in a div

<div class="class1 class2" id="myId"></div>

You can do this for a header or a paragraph. Just put h1 tag before class1.class2#myId and it will do the same for header 1.

• Text inside element: You can write a text inside your element using emmet. If you want to write something inside a header you can write h1{This is header one} and hit enter. It will do the rest for you.

<h1>This is header one</h1

• Generate Lorem Ipsum: If you frequently use dummy text for your development and every time you go and copy the text from here then this is perfect shortcut for you. Inside a paragraph tag just write lorem10. This will generate 10 dummy word for you inside the p tag.

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, quasi!</p>

You can get as much text as you want. Just write your number of words after lorem e.g. lorem100, lorem2000

• Child and sibling elements: You can write more than one tag at one go. Let's say you want 5 li inside a ul and that ul should be in a p. So you can write something like this p>ul>li*5, hit enter and emmet will create below code for you -

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

What if you want to make a form and inside a form you wanna have one text input and a submit button. Write **form:post>input:text+input:s*. It will generate the below code -

    <form action="" method="post">
        <input type="text" name="" id="">
        <input type="submit" value="">
    </form>

These are the shortcuts that I mostly use. But if you are interested for more shortcuts like this for HTML and CSS you can visit this link

Thank you all.