Learning Emmet

1 . The Basics: Tags and Nesting(press Tab) :

Type: div → Result: <div></div>

2. Child(>), Sibling(+), Climb up(^), class(.), id(#) :

    <!-- header>div.logo>ul>li^^^nav+main+foote -->
    <header>
        <div class="logo">
            <ul>
                <li></li>
            </ul>
        </div>
    </header>
    <nav></nav>
    <main></main>
    <footer></footer>
   

3. Multiplication(*) :

    <!-- ul>li*5 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
   

4. Numbering($) :

    <!-- ul>li.item-$*3 -->
     <ul>
        <li class="item-1"></li>
        <li class="item-2"></li>
        <li class="item-3"></li>
     </ul>
   

5. Text{…} :

    <!-- button{submit} -->
     <button>submit</button>
   

6. Dummy Content(lorem) :

    <!-- p>lorem*2 -->
    <p>2 para of dummy content</p>
   

7. Boilerplate(!) :

   Type: ! and press Tab.