Ctrl-Shift-W
Wrap block of text in HTML tags. Defaults to
, but you can then type the name of the tag you want and it will take care of the opening and closing tags.
Ctrl-Shift-Cmd-W
Same as above but for multiple lines of text. Excellent for creating lists, or pre-processing lots of paragraphs. Defaults to but can be changed immediately after (same as above).
Ctrl-Return
Quickly insert a
tag.
Ctrl-Shift-L
Copy a link from a web browser, putting it on the clipboard. Then select text or an image and hit this key combo to insert a link to that URL.
Ctrl-Opt-Cmd-P
View the current document in a web browser preview window (uses Safari's WebKit rendering engine). The nice thing about this built-in previewer is that you never need to reload it - the preview updates in real-time as you type.
Cmd-Shift-C
Make sure your cursor is in a "context" (place) where a color value can be inserted. Then hit this key combo to bring up the OS X color picker for quick hexadecimal color values.
Ctrl-Shift-V
Run document through the W3C validation service.
Ctrl-Shift-H
Run document through the HTML Tidy engine to clean up messy code. Tip: Select a portion of code first, and Tidy will only run against the selected code, not the whole document.
Ctrl-Cmd-T
Perhaps the greatest TextMate hotkey of them all - raises a small panel into which you can type a search term for quick reference to all of TextMate's built-in hotkeys and code completion snippets. Try it!
TextMate can fill out "template" code for many common tasks. Try typing any of these words at the left margin of an HTML document and hitting the Tab key:
lorem --> Creates filler lorem ipsum text
table --> Creates a basic HTML table
div --> Creates a basic div, ready to take an ID name
style --> Creates a CSS style block in the document context
link --> Creates a link tag reference for attaching an external stylesheet (not for creating clickable links!)
movie --> Creates embed code for QuickTime movies
You can create your own snippets for any kind of text you need to insert on a regular basis - see TextMate's "Bundle Editor" for examples.
In the context of a CSS document or a CSS block, type a property name then hit Tab to see a list of available properties or property sets. For example, from within a CSS block, type border and then hit the Tab key. You'll get a panel showing a bunch of pre-fab border options. Select one to insert appropriate code.
