Wrap Selection With Tag

Use the keyboard to put a wrapper tag around a selection of code.

HTML tag surrounding, the easy way.

You need a div around a block. Use the keyboard not just for selection, but also for adding the tag to surround with.

In Depth

You're in an HTML file, working on a nice block of markup, and realize your CSS framework wants a wrapper <div>. Don't they always? What's another <div>, right?

You could use mouse to move to the start, type in <div>, go to the end, type in </div>, and by then you forgot what you were doing.

Instead:

  • Make a selection with your keyboard

  • Invoke Surround With (Shift-Ctrl-A Win/Linux, Alt-Cmd-T macOS)

  • Hit T to choose Surround with <tag></tag> in the Live Templates section

  • In the prompt, type the name of the tag

If you're a fan of the Emmet system for quickly generating markup, you can also surround with Emmet.

Full Video