Emmet 101

emmet-101.md

• Emmet 101
  • Using Emmet with HTML
    • Creating nested html using >
    • Creating nested & adjacent html using +
    • Creating placeholder text using lorem
    • Creating placeholder text using lorem and multiplying with *
    • 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"]{$#}`

---

Emmet 101

Using Emmet with HTML

Creating nested html using >

<!-- 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 +

<!-- 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

<!-- 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 *

<!-- 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

<!-- 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 textand inserts it where the{$#}` is

<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>