This is a side effect of some third party package that you have installed; what you’re seeing there isn’t the native Sublime behaviour for this particular feature.
In core Sublime, entering div
and pressing Tab in an HTML file will expand the tag to <div></div>
and leave the cursor between the tags for you to enter the content.
What you’re seeing here is a package that’s trying to be more clever about how tags are expanded by using snippets.
The sequence of events is probably supposed to go like this:
- You enter
div
and press Tab
- The text expands to a full
<div>
tag, but the cursor is still inside of the start tag
- The status line shows you the text
Field 1 of 3
to tell you that you’re field 1 of a 2 field snippet (the third field is the point at which you “exit” the snippet and go back to normal editing).
- The position of the cursor suggests that you’re meant to type any attributes that you might need on this tag as field 1.
- You enter any tag attributes you want (including none at all), and then press Tab to go to field 2
- This jumps the cursor between the tags, so you can enter some content inside. The status line now says
Field 2 of 3
to tell you you’re in the second field.
- You enter some text for the content of the tag (including None at all) and press Tab one last time
- The cursor jumps outside of the
<div>
tag, which also exits the snippet
- At this point the status line no longer says what field you’re in; the snippet is complete and you’re back in normal editing mode.
What’s actually happening is this:
- You enter
div
and press Tab
- The text expands to a full
<div>
tag, but the cursor is still inside of the start tag
- Instead of pressing Tab, you arrow down into the div; however the status line shows you that Sublime still thinks that you’re inside of a snippet (it says
Field 1 of 3
).
- You enter a
p
and press Tab, thinking that it’s going to expand the tag out, but it doesn’t
- What actually happens is that the cursor jumps to before the
p
, which is the point where field 2 is set to allow you to enter the snippet body; the status line says Field 2 of 3
- You arrow past the
p
one more time and press tab, thinking that it’s going to expand the tab out, but it doesn’t
- What actually happens is that the cursor jumps to the end of the
<div>
tag, which is the point where field 3 (the exit point of the snippet) is set to jump you out of the tag so you can finish editing; the status line no longer says anything about fields.
- You arrow back up and press Tab, which this time actually expands the tag
- The cursor is left inside of the
<p></p>
tag pair so you can enter some text, but this again is a snippet; the status line says Field 1 of 2
, to tell you that after you enter the contents, you should press Tab to jump the cursor to the end of the tag.
Basically short story long, if you want to keep using the package that you’re using (my guess would be Emmet
), after you expand a tag you should press Esc to exit out of snippet mode and back into regular editing mode; if you do that, things will work the way you expect.
If that solves all of your problems, that package is probably not what you want to use, so you can disable/uninstall it. As mentioned above, core sublime handles tag expansions in HTML files by creating the tag pair and leaving the cursor inside of them for you to edit but otherwise does nothing special, which sounds like what you want to do.
Alternatively, the package in question might have some sort of configuration that you can use to tell it to just expand tags without all of the fancy snippet handling that’s getting in your way.