Wrap Selection With Tag

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

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.


  • Make a selection with your keyboard

  • Invoke Surround With ⌘⇧A (macOS) / Ctrl+Shift+A (Windows/Linux)

  • Hit T to choose Surround with 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.

Related Resources

Run npm Scripts from package.json
Browse your package.json scripts and run in a dedicated tool window.
Configuring the New UI in any JetBrains IDE
We'll walk you through the steps to enable the sleek and efficient New UI in your favorite JetBrains Integrated Development Environment.
How to Quickly Jump to Recent Files in any JetBrains IDE
Are you tired of hunting for that crucial file buried in your project? Say goodbye to the hassle with these IDE shortcuts and tips. Jump to recent files effortlessly in JetBrains IDEs like IntelliJ IDEA, PyCharm, PhpStorm, WebStorm, GoLand, CLion, RubyMine, and more!