Looking to master Emmet and improve your efficiency in writing HTML? Here, we delve into a step-by-step tutorial on how to add HTML around a plain text list using Emmet's wrap tag keystroke.
Key Insights
- Emmet's wrap tag keystroke can be used to add HTML around a plain text list. The keys are 'Option–W' for Mac and 'Alt–W' for Windows.
- The wrap tag keystroke only works if you have previously defined it.
- Typing 'ul>li*' allows you to wrap all list items.
- The addition of '>a' to 'ul>li*' makes every list item a link.
- The final structure of your HTML list would look like a series of 'li' tags, each containing an 'a' tag, nested within a 'ul' tag.
- Upon completion, hit 'Return' on Mac or 'Enter' on Windows.
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. |
Adding HTML Around a Plain Text List
-
Select a multi-line plain text list such as:
Monday Tuesday Wednesday Thursday Friday Saturday Sunday Hit Emmet’s wrap tag keystroke: Option–W (Mac) or ALT–W (Windows). Please note this keystroke only works if you defined it (as we’ve previously explained and had you set up using the instructions in the Before You Begin section near the start of this book).
-
Type ul>li
*to see it wraps all the list items like this:<ul> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>Friday</li> <li>Saturday</li> <li>Sunday</li> </ul> -
If you add >a so you have ul>li
*>a you’ll also get links:<ul> <li><a href="">Monday</a></li> <li><a href="">Tuesday</a></li> <li><a href="">Wednesday</a></li> <li><a href="">Thursday</a></li> <li><a href="">Friday</a></li> <li><a href="">Saturday</a></li> <li><a href="">Sunday</a></li> </ul> Hit Return (Mac) or Enter (Windows) to finish.
