March 10, 2026 (Updated April 19, 2026)Dan Rodney/2 min read

Topic 3B: Emmet: HTML Abbreviations

Inline vs Block Elements

Feature	Description
Inline	Flow with text — <span>, <a>, <em>. Width and height ignored.
Block	Take full width, start new line — <div>, <p>, <h1>. Respect width/height.

Master HTML & CSS at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate teaches HTML, CSS, and JavaScript — the complete front-end foundation.

Dive into this comprehensive tutorial on utilizing HTML abbreviations with Emmet, featuring examples of various useful abbreviations and the HTML code they expand into.

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="https://www.nobledesktop.com/details"]`

<ul>
   <li class="item1"><a href="https://www.nobledesktop.com/details"></a></li>
   <li class="item2"><a href="https://www.nobledesktop.com/details"></a></li>
   <li class="item3"><a href="https://www.nobledesktop.com/details"></a></li>
   <li class="item4"><a href="https://www.nobledesktop.com/details"></a></li>
   <li class="item5"><a href="https://www.nobledesktop.com/details"></a></li>
</ul>

NOTE: The a[href=""] above uses the CSS attribute selector syntax. If you haven’t used attribute selectors, learn more about 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!