Skip to main content
March 23, 2026Dan Rodney/2 min read

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

Master Emmet HTML Wrapping Techniques for Developers

Prerequisites Check

This tutorial requires Emmet's wrap tag keystroke to be configured. Ensure you've completed the setup instructions from the Before You Begin section before proceeding.

Emmet Wrapping Benefits

Time Efficiency

Convert plain text lists to structured HTML in seconds instead of manually typing each tag. Perfect for rapid prototyping and development workflows.

Error Reduction

Automated tag generation eliminates common HTML syntax errors like unclosed tags or mismatched elements. Ensures consistent markup structure.

Flexible Output

Single command generates various HTML structures from simple lists to complex nested elements with links. Adapts to different project needs.

Adding HTML Around a Plain Text List

  1. Start by selecting any multi-line plain text list in your editor. For this example, we'll use a simple list of weekdays:

    Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday

  2. Activate Emmet's wrap tag feature using Option–W (Mac) or ALT–W (Windows). This powerful shortcut transforms selected text using Emmet abbreviations—but it only functions if you've properly configured the keybinding as outlined in the Before You Begin section. If you haven't set this up yet, refer back to those configuration steps before proceeding.

  3. Enter the abbreviation ul>li* and watch Emmet intelligently wrap each line item. The asterisk (*) tells Emmet to multiply the li element for each selected line, producing clean, semantically correct markup:

    <ul>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
    <li>Sunday</li>
</ul>

  4. To create a navigation menu or linked list, extend the abbreviation by adding >a to get ul>li*>a. Emmet will automatically generate anchor tags with empty href attributes, ready for you to populate with your target URLs:

    <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. Press Return (Mac) or Enter (Windows) to execute the transformation. Your plain text list is now properly structured HTML, complete with semantic markup and consistent formatting.

Basic List Wrapping Process

1

Select Text

Highlight the multi-line plain text list containing items like days of the week or any other list items you want to convert to HTML.

2

Trigger Wrap Command

Use Option-W on Mac or ALT-W on Windows to activate Emmet's wrap functionality. This keystroke must be configured beforehand.

3

Enter Wrapper Syntax

Type 'ul>li *' to create an unordered list structure where each text line becomes a list item wrapped in appropriate HTML tags.

4

Execute Command

Press Return on Mac or Enter on Windows to complete the wrapping process and generate the final HTML structure.

Wrapping Syntax Options

FeatureBasic ListList with Links
Emmet Syntaxul>li *ul>li * >a
Generated Tags per Item<li>text</li><li><a href="">text</a></li>
Use CaseSimple content listsNavigation menus
Additional SetupNone requiredHref attributes need completion
Recommended: Use basic syntax for content lists, extended syntax for interactive navigation elements.
Advanced Wrapping Technique

Adding '>a' to your ul>li * syntax automatically generates anchor tags within each list item, creating ready-to-use navigation structures with placeholder href attributes.

Emmet Wrapping Analysis

Pros
Instantly converts plain text to semantic HTML structure
Supports complex nested element generation
Maintains original text content while adding markup
Works with any length of list items
Consistent formatting across all generated elements
Cons
Requires initial keystroke configuration
Limited to predefined Emmet syntax patterns
Generated anchor tags need manual href completion
May not work in all text editors or IDEs

Post-Wrapping Tasks

0/4

Key Takeaways

1Emmet's wrap tag feature converts plain text lists into properly structured HTML using simple syntax patterns like 'ul>li *'
2The wrap functionality requires keyboard shortcut configuration (Option-W for Mac, ALT-W for Windows) before use
3Basic wrapping creates list items, while extended syntax 'ul>li * >a' generates nested anchor tags for navigation
4The asterisk symbol in Emmet syntax tells the engine to repeat the structure for each selected text line
5Generated anchor tags include empty href attributes that require manual completion for functional links
6This technique significantly reduces development time compared to manually typing HTML list structures
7The wrapping process preserves original text content while adding semantic HTML markup around it
8Proper setup and syntax knowledge are essential for maximizing Emmet's text wrapping capabilities in web development workflows

RELATED ARTICLES