In Sublime Text how do you short-cut writing code?

My apologies but I do not know what its called, if this has been asked or what Stack site this is best suited for. I've seen several videos on how people use Sublime to create quicker tags and I would like to learn the proper way to do this if there is any documentation or what I can do quicker in my coding.

In several videos I see people doing things like:

div.class and it will create <div class="class"></div> after tab.

The feature you describe is part of Sublime Text 2 out of the box. Make sure your document uses HTML syntax (View » Syntax » HTML).

Type foo.bar, press Tab, and you'll get <foo class="bar"></foo>. There's also foo#bar (for id instead of class). Both are implemented in Packages/HTML/html_completions.py.

Emmet / Zen-Coding

Emmet is a plugin where you write the basic structure in a CSS-selector-like manner and have the editor expand it. You can find the package on GitHub and install it through the Package manager.

_{(source: smashingmagazine.com)}

This Smashing Magazine has an article on it. For example,

(.foo>h1)+(.bar>h2)

will expand with Tab to

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

Wrap Selection in Tags

What you can also do is press AltShiftW to create an open tag or wrap the current selection in a tag (see Edit » Tag » Wrap Current Selection in Tag).

By default it'll create:

<p></p>

with the tag name selected so you can overwrite it.

Pressing Tab would further get you inside the tag. Or, if you press Space, you could create attributes, for example:

• AltShiftW (on Windows/Linux) or CtrlShiftW on OS X
• A
• Space
• Type href="...", then Tab
• Results in <a href="..."></a> with the cursor positioned inside the tag