# Learning Emmet

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

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

2. Child(&gt;), Sibling(+), Climb up(^), class(.), id(#) :
    
    ```xml
    <!-- 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(\*) :
    
    ```xml
    <!-- ul>li*5 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    ```
    
4. Numbering($) :
    
    ```xml
    <!-- ul>li.item-$*3 -->
     <ul>
        <li class="item-1"></li>
        <li class="item-2"></li>
        <li class="item-3"></li>
     </ul>
    ```
    
5. Text{…} :
    
    ```html
    <!-- button{submit} -->
     <button>submit</button>
    ```
    
6. Dummy Content(lorem) :
    
    ```html
    <!-- p>lorem*2 -->
    <p>2 para of dummy content</p>
    ```
    
7. Boilerplate(!) :
    
    **Type:** `!` and press `Tab`.