Dive into this detailed Emmet tutorial and learn how to seamlessly add HTML around a plain text list for efficient coding.
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.
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.
