Tag Text Objects

The last text object we will look at is that tag text object, which can be particularly handy when working with XML or HTML tags.

The tag text object recognizes the fact that tags are used to create structured data, and as a result are aware of the current scope of the cursor when selections are made. As before, let's start by selecting inside these text objects, then look at selecting around them.

Selecting Inside Tags

We will use the following HTML snippet to demonstrate. First, starting from the outermost tag, we select inside the tag:

Initial Conditions
<ul>
····<li>one</li>
····<li>two</li>
····<li>three</li>
</ul>
NORMAL
Top
1:1
 
Move the cursor
vit
<ul>
····<li>one</li>
····<li>two</li>
····<li>three</li>
</ul>
VISUAL
67%
4:19
 

The tag text object was aware that the cursor was located on a parent tag, and therefore knew to select all child tags within that parent. Likewise, if we jump to one of the child tags and repeat the process, we now select the inner content of only that tag:

Move the cursor (again)
<ul>
····<li>one</li>
····<li>two</li>
····<li>three</li>
</ul>
NORMAL
67%
4:5
 
Move the cursor (again)
vit
<ul>
····<li>one</li>
····<li>two</li>
····<li>three</li>
</ul>
VISUAL
67%
4:13
 

Selecting Around Tags

Now, if we move the cursor down one line it will be located at the parent's closing tag. Let's try selecting around that tag:

Initial Conditions
<ul>
····<li>one</li>
····<li>two</li>
····<li>three</li>
</ul> 
NORMAL
83%
5:5
 
Move the cursor
vat
<ul>
····<li>one</li>
····<li>two</li>
····<li>three</li>
</ul> 
VISUAL
83%
5:5
 

Nice, once again the text object understood the cursor's current scope, and was able to select the entire parent tag. Moving back up a line, we can repeat the process and select around the child tag:

Move the cursor (again)
<ul>
····<li>one</li>
····<li>two</li>
····<li>three</li>
</ul>
NORMAL
67%
4:13
 
Move the cursor (again)
vat
<ul>
····<li>one</li>
····<li>two</li>
····<li>three</li>
</ul>
VISUAL
67%
4:18