Skip to content

Instantly share code, notes, and snippets.

@pixelspencil
Last active March 23, 2021 00:02
Show Gist options
  • Save pixelspencil/8aebabef5cd16b0ac0916aab6f45816b to your computer and use it in GitHub Desktop.
Save pixelspencil/8aebabef5cd16b0ac0916aab6f45816b to your computer and use it in GitHub Desktop.
Emmet 101

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>

<!-- emmet code -->
p>Lorem*5

<!-- generated html -->
<p>
  <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    Voluptate vitae molestias dolores totam soluta est, officiis
    voluptatibus modi ducimus nobis odit laborum sed error. Magni
    itaque quasi cumque sapiente voluptas.</span>
    <span>Aliquid a eius culpa, magnam amet illo at eligendi facere tenetur
    soluta numquam quaerat maxime, qui, id earum quia atque error
    ipsum quis harum perferendis necessitatibus odio voluptatibus
    nemo. Ratione.</span>
    <span>Fugiat ex exercitationem laborum quisquam, eius similique iste
    quis officia deleniti atque, debitis aliquam ratione! Quidem,
    aperiam libero vitae pariatur iusto quae amet nihil dolore eos
    dicta unde, esse nulla.</span>
    <span>Quia, dolorem repellat et incidunt porro iure nemo facere rerum
    quasi odio tenetur ducimus tempora excepturi eaque hic
    voluptatibus deleniti corrupti nihil reprehenderit. Excepturi qui
    repudiandae architecto dicta quaerat totam.</span>
    <span>Ducimus similique molestias quibusdam! Assumenda, consectetur
    iste vitae ducimus omnis necessitatibus repellat, dolorum facilis
    quia natus, obcaecati eaque tempore. Sed dolorum voluptatem
    quidem, amet enim cum fugit adipisci rem blanditiis?</span>
</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment