Share via

Visual Studio IDE: How to use Surround with html tag

  • Article

Introduction

This is a Visual Studio IDE trick and is available in VS 2012, VS 2013 and VS 2015. In this article we will see how to use the **Surround With **command to surround you html tag/element with additional tag or element without missing the end tag or trying to figure out the start and end tag in a lengthy html/ tag.

Surround-with functionality can be used in 3 ways

  1. Through the Edit menu
  2. Through keyboard shortcut
  3. And through the context menu

Steps for Surround with using Edit Menu

  • In the Visual Studio IDE open the file ( .html page / .aspx page / .cshtml).
  • Select the text/html you want to surround with ( see below Fig 1.)

http://i.imgur.com/hm5H9kc.png
Fig. 1

  • Click on Edit menu, select IntelliSense and then select the Surround With command

http://i.imgur.com/veLXtUl.png

Fig. 2

  • The code Snippet will be displayed, select the appropriate tag or element (here we are selecting HTML and table) and press Enter or Tab.

http://i.imgur.com/xqtvPpt.png

Fig. 3

  • The tag will surround the selected text/html (as shown below).

http://i.imgur.com/2OVpOca.png

Fig. 4

Steps for using the Keyboard shortcut

  • In the Visual Studio IDE open the file ( .html page / .aspx page / .cshtml).
  • Select the text/html you want to Surround with ( see above Fig 1)
  • Type CTRL+K, CTRL+S
  • The code snippet will be displayed, Select the appropriate tag or element and then press Enter or press Tab (see above Fig. 3)
  • The tag will surround the selected text/html (as above fig. 4)

Steps for using the context menu

  • In the Visual Studio IDE open the file ( .html page / .aspx page / .cshtml).
  • Select the text/html you want to Surround with ( see above Fig 1)

http://i.imgur.com/x5YqBAv.png

Fig. 5

  • The code snippet will be displayed, Select the appropriate tag or element and then press Enter or press Tab (see above Fig. 3)
  • The tag will surround the selected text/html (as above fig. 4)

Hope this Helps. Feel free to add comments and Edit if required.

Happy Learning

Hussain Patel