To surround a block of code with an Emmet template, follow these steps
  1. Open the desired file for editing and select a block of code to be surrounded.
  2. Press ⌥⌘J or ⌥⌘J⌥⌘J or ⌥⌘J⌥⌘J or ⌥⌘J^ ⌥ J, ⌃⌥J or ⌃⌥J^ ⌥ J, ⌃⌥J or ⌃⌥J, or choose Code | Surround with Live Template on the main menu .
  3. In the Select Template pop-up menu, choose Emmet:

    select_template

  4. Type the desired Emmet abbreviation, and press ⏎ or ⏎⏎ or ⏎⏎ or ⏎Enter, ⏎ or ⏎Enter, ^ M, ⏎, ⌃M, ⏎ or ⌃M.

    Note the drop-down list to the right. Clicking the down arrow reveals a history list of the recently applied Emmet live templates:

    emmet_history

    Also mind the color indication. If you type a valid Emmet abbreviation, the background is green. However, when a non-existent abbreviation is entered, the background becomes red:

    emmet_abbreviation

See Also

Procedures:

Reference: