Skip to main content
Dan Rodney/1 min read

Topic 3F: Emmet: Wrapping Text in an HTML List

Inline vs Block Elements

FeatureDescription
InlineFlow with text — <span>, <a>, <em>. Width and height ignored.
BlockTake 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 detailed Emmet tutorial and learn how to seamlessly add HTML around a plain text list for efficient coding.

Adding HTML Around a Plain Text List

  1. Select a multi-line plain text list such as:

    Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday

  2. 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).

  3. 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>

  4. 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>

  5. Hit Return (Mac) or Enter (Windows) to finish.