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

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