I’m going to kick off a look at some of the bundles with an overview of the HTML bundle.
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:
⌃<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” (
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
tidytool 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”