Refine your coding skills with this comprehensive tutorial on using Emmet's HTML abbreviations. Learn how to expand short abbreviations into full HTML code, creating efficient and streamlined coding practices.
Key Insights
- Emmet provides a variety of short abbreviations that expand into full HTML code, enhancing coding efficiency.
- Examples of useful Emmet abbreviations include 'h1', 'p', 'img', 'div', '#myElement', and '.myElement'.
- Emmet's CSS-like syntax allows for the creation of classes on different tags, such as 'ul.myList'.
- Emmet's syntax also allows for the generation of repeated elements, as demonstrated by 'ul>li*3'.
- The '$' symbol can be used to output the current number of a repeated element, useful for creating numbered lists or items.
- Emmet abbreviations can be utilized alongside CSS attribute selector syntax to create complex elements such as 'ul>li.item$*5>img[src="img/photo$.jpg"]'.
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.
| 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. |
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!
