Hello friends, I hope you are doing well. In the last article, we discussed a few emmets. Last Article : Click Here

In this article, we are going to discuss some more emmets that are really helpful and save a lot of time for each developer. let's get started!

To understand it in a better way we will see some code examples with emmet used to create it.

Emmet for HTML

1. Multiple Elements

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

To generate the above code of HTML, use the below emmet

ul>li*5

2. Naming and numbering in class name -1

<ul>
  <li class="sample1"></li>
  <li class="sample2"></li>
  <li class="sample3"></li>
  <li class="sample4"></li>
  <li class="sample5"></li>
</ul>

To generate the above code, use the below emmet

ul>li.sample$*5

3. Naming and numbering in class name -2

<h1 title="topic1">Headline 1</h1>
<h2 title="topic2">Headline 2</h2>
<h3 title="topic3">Headline 3</h3>

To generate the above code, use the below emmet

h$[title=topic$]{Headline $}*3

4. Naming and numbering in class name -3

<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
</ul>

To generate the above code, use the below emmet

ul>li.item$$$*5

5. Naming and numbering in class name -4

<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

To generate the above code, use the below emmet

ul>li.item$@-*5

6. Naming and numbering in class name -5

<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li>
</ul>

To generate the above code, use the below emmet

ul>li.item$@3*5

7. Div with ID attributes

<div id="header"></div>

To generate the above code, use the below emmet

#header

8. Div with class attributes

<div class="title"></div>

To generate the above code, use the below emmet

.title

9. Div with class and ID attributes

<div class="wide" id="search"></div>

To generate the above code, use the below emmet

.wide#search

10. Div with multiple class attributes

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

To generate the above code, use the below emmet

.class1.class2.class3

Click Here to access the complete cheatsheet of emmets. Hit the follow button and stay tuned with me to know more tips and tricks because #iwritecode