Dive into this comprehensive tutorial on utilizing HTML abbreviations with Emmet, featuring examples of various useful abbreviations and the HTML code they expand into.
This exercise is excerpted from Noble Desktop’s front-end web development (Emmet coding tips) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.
Using Emmet’s HTML Abbreviations
Emmet includes a lot of short abbreviations that you can expand into longer HTML code. Type an abbreviation, then hit Tab to expand the abbreviation into the full HTML code. Emmet’s Cheat Sheet has a complete list of the abbreviations: docs.emmet.io/cheat-sheet
Below are examples of some useful abbreviations and the code they expand into after you hit Tab. Many use a CSS-like syntax.
h1
<h1></h1>
p
<p></p>
img
<img src="" alt="">
div
<div></div>
#myElement
<div id="myElement"></div>
.myElement
<div class="myElement"></div>
NOTE: div is assumed. If you want the class on a different tag (such as a ul tag) refer to the next example.
ul.myList
<ul class="myList"></ul>
ul>li
<ul>
<li></li>
</ul>
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul.myList>li*3
<ul class="myList">
<li></li>
<li></li>
<li></li>
</ul>
h1+p
<h1></h1>
<p></p>
TIP: After typing content into the h1 tag, hit Tab to jump inside the p tag!
div#myContent>h1+p*3
<div id="myContent">
<h1></h1>
<p></p>
<p></p>
<p></p>
</div>
ul>li.item$*5>a
<ul>
<li class="item1"><a href=""></a></li>
<li class="item2"><a href=""></a></li>
<li class="item3"><a href=""></a></li>
<li class="item4"><a href=""></a></li>
<li class="item5"><a href=""></a></li>
</ul>
NOTE: $ outputs the current number of the repeated element.
ul>li.item$*5>a[href="/details/"]
<ul>
<li class="item1"><a href="/details/"></a></li>
<li class="item2"><a href="/details/"></a></li>
<li class="item3"><a href="/details/"></a></li>
<li class="item4"><a href="/details/"></a></li>
<li class="item5"><a href="/details/"></a></li>
</ul>
NOTE: The a[href=""] above uses the CSS attribute selector syntax. If you haven’t used attribute selectors, learn more them at css-tricks.com/attribute-selectors
ul>li.item$*5>img[src="img/photo$.jpg"]
<ul>
<li class="item1"><img src="img/photo1.jpg" alt=""></li>
<li class="item2"><img src="img/photo2.jpg" alt=""></li>
<li class="item3"><img src="img/photo3.jpg" alt=""></li>
<li class="item4"><img src="img/photo4.jpg" alt=""></li>
<li class="item5"><img src="img/photo5.jpg" alt=""></li>
</ul>
lorem20
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt illo non dolor nobis eveniet dolore consectetur nostrum, sequi officia qui!
NOTE: Change the number after lorem to be how many words you want!
