Posts RSS Comments RSS 32 Posts and 1,017 Comments till now

TextMate Tip – The HTML Bundle

I’m going to kick off a look at some of the bundles with an overview of the HTML bundle.

Inserting Tags

Most of your time using the HTML bundle will of course be spent writing HTML, so learning just a few commands to make the process easier can save you a lot of time. In fact, you really only need to remember one – the “Insert Open/Close Tag (With Current Word)” command (bound to ⌃< – remember you must press the keys required to generate the characters, so likely you will use ⌃⇧,).

This command can be used to insert HTML tag pairs in a few ways:

  • Press ⌃< on its own to get an empty paragraph tag; the “p” will remain selected so you can type whatever tag name you need and it will be mirrored in the closing tag – you can also add attributes to the tag without them being mirrored. Once you’re done, hit tab to move the caret between the tags and enter the content, then hit tab again to move after the closing tag.
  • Type a tag name and then press ⌃< right after it to turn the word into a tag pair, with the caret between them.
  • It’s also possible to invoke with a selection to convert it to a tag (including any attributes you have selected) but this is of limited use – if you want to enter attributes you should use the first form.

Using this command will not only save you time, but also ensure your tags are balanced as it inserts both tags together. If you have some unbalanced tags you can use the “Insert Close Tag” command (⌥⌘.) to close the first tag above the caret which has not been finished.

Two other useful commands are for when you have existing content which you wish to wrap in a tag – you can select some text and then use “Wrap Selection in Open/Close Tag” (⌃⇧W) to enclose the text in a paragraph tag, which you can then alter by typing over it and tabbing out as in the first command.

If you have a few lines of text which you want to wrap in tags, for example some paragraphs or list items, you can select each line and run “Wrap Each Selected Line in Open/Close Tag” (⌃⇧⌘W).

There are also snippets to insert tags or groups of tags; a few useful examples are doctype, style, script, ⌃↩ (a break tag) and ⌥␣ (a non-breaking space). Take a look in the Insert Tag submenu of the HTML bundle for a full list.

One final useful command is “Wrap Word / Selection as Link” (⌃⇧L), which encloses the word or selection in an <a> tag, using the contents of the clipboard as the URL, and the page’s title if the URL begins with http:// (Note: this command is actually part of the Hyperlink Helper bundle, as it is designed to be used in multiple scopes).

Writing Valid HTML

There are also other commands to help you while writing HTML, such as:

  • Validate Syntax (⌃⇧V) – this sends the document to the W3C’s validation service and displays the results in a HTML window, adding links to jump back to errors
  • Tidy (⌃⇧H) – this command invokes the tidy tool on the document to format it and provide feedback on warnings/errors
  • Documentation for Tag (⌃H) – use this on a tag to view the W3C’s reference page on the subject
  • Various entity/escaping-related commands (⌘&) – the bundle includes commands to encode and decode characters, URL escape text, and insert character entities from a list

Also, for people writing XHTML you should use the TextMate preferences to set a variable called TM_XHTML with the value ‘ /’, to make all the commands and snippets insert XHTML-compliant tags.

As with all the bundles, there is really more functionality than I can cover here, so be sure to check out the bundle menu to get a good overview of the bundle’s features.

10 Responses to “TextMate Tip – The HTML Bundle”

  1. on 14 Feb 2008 at 5:39 amBrian

    Great tips as always.

    Another one I like is the “CodeCompletion HTML Attributes”. It’s a great quick reference when you can’t remember some less-common attribute for some tag.

  2. on 14 Feb 2008 at 4:34 pmMatt

    Another cool thing: many of these tricks work in the XML Bundle too!

  3. [...] HTML Bundle Tips – Great tips on using the HTML bundle in Textmate [...]

  4. on 03 Apr 2008 at 1:28 amdennis

    Hey Brian,

    as this is about ‘I show you how to get you done with TM’ … we all are interested how you do the “CodeCompletion HTML Attributes” in detail. These details are such an important thing in these matters :0)

  5. on 05 Apr 2008 at 6:32 amBrian

    Dennis,

    I just mean the ⌥ ⎋ sequence when inside an HTML tag – it will bring up a dropdown of the available attributes that are valid for the tag you’re in. e.g. type <img ⌥ ⎋ and you’ll see the available attributes for the img tag.

  6. on 12 Jul 2008 at 1:44 pmRafael Vega

    Nice tip Brian, I just love code completions :-) One thing though, I cant get the “CodeCompletion HTML Tags” to work. Any one had any luck with this one?

  7. on 07 Aug 2008 at 4:35 pmrob

    You know, I have the same problem with “CodeCompletion HTML Tags” … nothing happens for me … probably doing something dumb …

  8. on 09 Nov 2008 at 7:04 amDoug

    The Option-Esc trick to bring up a context menu of HTML completions will only work if the TM document is set to type HTML (or HTML Django). It won’t work for plain text which is the default for new TM documents.

  9. on 17 Apr 2010 at 7:18 amCheap auto Insurance

    Life insurance occupies a unique space in the landscape of investment options available to a customer.

  10. on 27 Jun 2010 at 11:17 ambatterie

    I cant get the “CodeCompletion HTML Tags” to work.

Fork me on GitHub