Sublime Text 2 wrapping selection in tag

In ST2, highlighting some text and pressing alt + shift + w (on Windows) will wrap the current selection in <p></p> tags. But is there a way to specify which tag to wrap with? Because maybe I want to wrap in a span, or a div instead.

Using Emmet, place the cursor in the tag you want to wrap and press ctrl + w (for MacOS) or Alt+Shift+W (for Windows), a box will pop up to enter the type of tag you want to wrap with.

Single line

If you want to convert this

Lorem ipsum dolor sit amet.

to this

<div>Lorem ipsum dolor sit amet.</div>	

do this:

• Select the text, or press CTRL + L (it will select the current line)
• Press ALT + SHIFT + W
• Type the desired tag (it will overwrite the default p tag)

Multiple lines

If you want to convert this

Item 1
Item 2
Item 3

to this

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

do this:

• Select the text, or press CTRL + L multiple times
• Press CTRL + SHIFT + L (it will make one selection per line)
• Press ALT + SHIFT + W
• Type the desired tag (it will overwrite the default p tag)

You can also select the text using SHIFT + MOUSE RIGHT BUTTON, and in this case you can skip the second step.

Using Emmet

If you want to convert this

Item 1
Item 2
Item 3

to this

<nav>
  <ul class="nav">
	<li class="nav-item1"><a href="">Item 1</a></li>
	<li class="nav-item2"><a href="">Item 2</a></li>
	<li class="nav-item3"><a href="">Item 3</a></li>
  </ul>
</nav>

do this:

• Select the text
• Press SHIFT + CTRL + G (wrap with abbreviation)
• Type nav>ul.nav>li.nav-item$*>a

Note for Mac users:

ALT + SHIFT + W = CTRL + SHIFT + W

CTRL + SHIFT + L = CMD + SHIFT + L

The answers are all good. Here is where key bindings are for customizing:

In Preference: Key Bindings - Default:

{ 
  "keys": ["ctrl+shift+w"], "command": "insert_snippet", 
  "args": { "name": "Packages/XML/long-tag.sublime-snippet" } 
}

If you have Emmet, the emmet version is

{ "keys": ["super+shift+w"], "command": "wrap_as_you_type"}

Edit them in Preferences: Key Bindings - User to your liking,

Create a custom snippet, for example, to insert a span tag. Go to the app menu: Tools > New Snippet ..., and copy to the window the snippet below:

<snippet>
    <content><![CDATA[
<span style="color:#0000FF">$SELECTION$1</span>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>span</tabTrigger>
    <description>HTML - span - color - blue</description>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.html</scope>
</snippet>

... then save the snippet to file with e.g. html-span--color name and bind that snippet to a key combination in Preferences > Key Bindings-User, creating a new key entry, for example:

{ "keys": ["alt+shift+c"], "command": "insert_snippet", "args": { "name": "Packages/User/html-span--color.sublime-snippet" } }

It is supposed that a location of the snippet is Packages/User/ directory.

Now select any text that you need to wrap in the span tag and press Alt+Shift+c or type 'span', press Tab, a cursor will be set to required position within the tag, just type your text.

I have successfully tested the snippet and key binding with Sublime Text 3 in Ubuntu Linux.

to make your life easy while you are in Sublime text3: type any of these(p, h1, div, header, footer, title...) and hit Tab for example if you want div Just type div and hit Tab

in ST2 type a tag without brackets and hit Tab. It will automatically give you open and closed tag

This system of inserting snippets is very cumbersome compared to the mechanism provided in Dreamweaver. In that case you build a snippet of any kind. It is stored in an in-RAM library and displayed in a directory-style structure. You declare whether the snippet is of type INSERT (at cursor position), or of type SPAN (span selected text). In the first case the entire snippet is inserted. In the second case the snippet is created with a "before" part and and an "after" part. Typically the "after" part is just the closing tag. To use INSERT HERE mode, you position the cursor, and double-click on the snippet in the library and it inserts it at cursor position. To use SPAN SELECTED TEXT mode, highlight the text you want, and double-click the snippet in the library. The selected text is surrounded by the "before" and "after" parts of the snippet. This is very intuitive, easy to use, and enables the user to build unlimited kinds of snippets which can span selected text. WOULD SOME VERY SMART PROGRAMMER PLEASE BUILD AN EXTENSION LIKE THIS FOR SUBLIME 3 ? Note: In comparison, Bracket Highlighter is a Sublime plugin with a wrapping function that would seem to have such functionality, but on close inspection it is way too cumbersome to use if you want to build an efficient snippet library on-the-fly. Thanks, Peter Rosti