Emmet Essentials 2026 – WRMF.ca (Transferred)

Being comfortable with all or most of these shortcuts will greatly speed up your generation of HTML and CSS.

! – Generate HTML5 boilerplate
tag – Create an element (e.g. div, section)
.class – Add a class
#id – Add an ID
tag.class#id – Combine element, class, and ID
> – Child relationship
+ – Sibling relationship
* – Multiply elements
$ – Numbering / counters
$@- – Reverse numbering
{} – Text content
[] – Attributes
() – Grouping expressions
^ – Climb up one level
lorem – Generate placeholder text
link:css – Insert a CSS link tag
script:src – Insert a script tag with src
input:type – Generate form inputs

Example Combinations

Combining the emmet commands gives us great power, as the following examples demonstrate.

header+main+footer creates a quick structure for typical content

<header></header>
<main></main>
<footer></footer>

header>nav>ul>li*6>a[href=”#”] creates a header with a nested nav containing a list-based menu with six list items. Each list item contains a testing link (#).

<header>
  <nav>
    <ul>
      <li>
        <a href="#"></a>
      </li>
      <!-- five items omitted -->
    </ul>
  </nav>
</header>

figure>img[src=”https://picsum.photos/600/400″ alt=”random img from internet”]+figcaption{randomly generated image from unsplash} creates a figure with two children (an image with two attributes, and a figcaption with specific text.

<figure>
  <img src="https://picsum.photos/600/400" alt="random img from internet">
  <figcaption>randomly generated image from unsplash</figcaption>
</figure>

img[src=”images/photo-$$.jpg”]*4 creates four images with incrementing src values. Additional dollar signs will produce leading zeros.

<img src="images/photo-01.jpg">
<img src="images/photo-02.jpg">
<img src="images/photo-03.jpg">
<img src="images/photo-04.jpg">

img[src=”http://picsum.photos/600/400?random=$”]*8 will create 10 random images from unsplash.

<img src="http://picsum.photos/600/400?random=1">
<img src="http://picsum.photos/600/400?random=2">
<img src="http://picsum.photos/600/400?random=3">
<img src="http://picsum.photos/600/400?random=4">
<img src="http://picsum.photos/600/400?random=5">
<img src="http://picsum.photos/600/400?random=6">
<img src="http://picsum.photos/600/400?random=7">
<img src="http://picsum.photos/600/400?random=8">

section#section-$*4.news>h2{Section $}article.story-$*3>h3{Story Title $}>lorem3+p*2>lorem10
is a very useful combination for creating boilerplate. Here we create four sections with the same class, but incrementing IDs. Each section has three articles with incrementing classes, incrementing titles, and paragraphs with random lorem ipsum.

We could easily add in random images and create great sample content for work mocking up a layout.

<section id="section-1" class="news">
  <h2>Section 1</h2>
  <article class="story-1">
    <h3>Story Title 1
      Lorem, ipsum dolor.
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, hic.
      </p>
      <p>
        Doloremque ullam beatae veritatis debitis iste reprehenderit quasi molestias cupiditate.
      </p>
    </h3>
  </article>
</section>
<section id="section-2" class="news">
  <h2>Section 2</h2>
  <article class="story-2">
    <h3>Story Title 2
      Praesentium, culpa accusantium?
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. In, sed.
      </p>
      <p>
        Architecto nemo ut delectus corporis praesentium quidem eius, esse nesciunt.
      </p>
    </h3>
  </article>
</section>
<section id="section-3" class="news">
  <h2>Section 3</h2>
  <article class="story-3">
    <h3>Story Title 3
      Excepturi, laborum labore?
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium, doloribus.
      </p>
      <p>
        Rerum sint dolorem reprehenderit sequi distinctio dolor porro accusantium nihil.
      </p>
    </h3>
  </article>
</section>
<section id="section-4" class="news">
  <h2>Section 4</h2>
  <article class="story-4">
    <h3>Story Title 4
      Rem, inventore quisquam?
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, voluptatum?
      </p>
      <p>
        A adipisci saepe omnis repellendus eum ullam dolores mollitia sit?
      </p>
    </h3>
  </article>
</section>

header>nav>ul>li*2>a[href=”#”]>lorem3^^^^p>lorem20 creates a header with two children: a nav and a paragraph. The ^ character takes us up one level in the DOM. In this case, we are getting out of the lorem text, the <a>, the <li> and the <ul>.

Another way to write this would be to use nesting via round brackets:
(header>nav>ul>li*2>a[href=”#”]>lorem3)+p>lorem20 will produce the exact same code.

<header>
  <nav>
    <ul>
      <li>
        <a href="#">
          Lorem, ipsum dolor.
        </a>
      </li>
      <li>
        <a href="#">
          Itaque, odit officiis!
        </a>
      </li>
    </ul>
  </nav>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quasi dolore dolores vitae. Suscipit, modi eveniet adipisci blanditiis voluptates vel.
  </p>
</header>