- [Emmet 101](#emmet-101)
  - [Using Emmet with HTML](#using-emmet-with-html)
    - [Creating nested html using `>`](#creating-nested-html-using-)
    - [Creating nested & adjacent html using `+`](#creating-nested--adjacent-html-using-)
    - [Creating placeholder text using `lorem`](#creating-placeholder-text-using-lorem)
    - [Creating placeholder text using `lorem` and multiplying with `*`](#creating-placeholder-text-using-lorem-and-multiplying-with-)
    - [Using `^` to move up elements and add sibling `p` after first `p`](#using--to-move-up-elements-and-add-sibling-p-after-first-p)
    - [Select text then using `ctrl+w` type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`](#select-text-then-using-ctrlw-type-in-ulliahrefhttpswwwcom-target_blank)

---

# Emmet 101

## Using Emmet with HTML

### Creating nested html using `>`
```html
<!-- emmet code -->
ul#groceries>li>a>img

<!-- generated html -->
<ul id="groceries">
  <li>
    <a href=""><img src="" alt="" /></a>
  </li>
</ul>
```

### Creating nested & adjacent html using `+`
```html
<!-- emmet code -->
h1+ul#groceries>li>a>img

<!-- generated html -->
<h1></h1>
<ul id="groceries">
  <li>
    <a href=""><img src="" alt="" /></a>
  </li>
</ul>
```

### Creating placeholder text using `lorem`

```html
<!-- emmet code -->
p>Lorem

<!-- generated html -->
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut in
  nihil, possimus doloribus suscipit quaerat temporibus. Aliquam
  quaerat adipisci, veritatis culpa sapiente eaque architecto unde,
  quia tenetur iure, repellat laudantium!
</p>
```

### Creating placeholder text using `lorem` and multiplying with `*`

```html
<!-- emmet code -->
p*2>Lorem

<!-- generated html -->
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
  commodi in necessitatibus vero, sunt fugiat consequuntur ea animi
  eligendi quidem laudantium vitae, eaque ipsum tempore! Laudantium
  mollitia repudiandae ratione quia?
</p>
<p>
  Cupiditate necessitatibus, architecto nulla, hic ea animi dolorem
  enim cum magnam illo id quam voluptates cumque a saepe, porro
  corporis sit dolor excepturi magni quibusdam illum deleniti amet.
  Commodi, magnam.
</p>
```

### Using `^` to move up elements and add sibling `p` after first `p`

```html
<!-- emmet code -->
.hero-unit>h1+p>Lorem^p>a

<!-- generated html -->
<div class="hero-unit">
  <h1></h1>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit et a
    atque doloribus eligendi odio distinctio quo, fuga autem dolorem.
    Maiores ea explicabo quaerat laudantium laborum debitis tempora vero
    nobis!
  </p>
  <p><a href=""></a></p>
</div>
```

### Select text then using `ctrl+w` type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`

- `$#` takes the selected value, in this case the url text` and inserts it where the `{$#}` is

```html
<ul>
  <li>
    <a href="https://www.twitter.com" target="_blank">twitter</a>
  </li>
  <li>
    <a href="https://www.flickr.com" target="_blank">flickr</a>
  </li>
  <li>
    <a href="https://www.youtube.com" target="_blank">youtube</a>
  </li>
  <li>
    <a href="https://www.facebook.com" target="_blank">facebook</a>
  </li>
</ul>
```