Espresso

HTML Actions

Espresso's HTML actions are generally most useful when working with HTML or other markup.

For information about actions useful in most languages, see General Actions.

Actions ⟩ New Tag (option command N)

Inserts a new HTML tag snippet at the cursor (or replaces the selection, if there is one).

Actions ⟩ Close Tag (option command .)

Closes the nearest open HTML tag. So if you have this (pipe represents cursor):

<div>
	<h1>My great title|

Hitting option command . will give you:

<div>
	<h1>My great title</h1>|

You can also trigger this action by typing </.

Actions ⟩ HTML ⟩ Convert To Named Entities (command &)

Convert To Named Entities will convert the character to the left of the cursor into a named HTML entity if it is not an ASCII character. If you select some text, all non-ASCII characters will be converted to named entities. For instance, if you have this (pipe represents cursor):

©|

And you hit command & (shift command 7 on English keyboards), you will get this:

&copy;|

If any character being parsed by this action does not have a named HTML entity, then the numeric entity for it will be used instead.

Actions ⟩ HTML ⟩ Convert To Numeric Entities

Identical to the previous action, except that it always uses the numeric HTML entity, even if there is a named equivalent available. So using our previous example, this:

©|

Will convert to this:

&#169;

Actions ⟩ HTML ⟩ Entities

This sub-menu allows you to insert a number of common character entities quickly via keyboard shortcuts. (Note: keyboard shortcuts are based on English keyboards, so the mnemonics may not make sense on international keyboards; as always, you can adjust keyboard shortcuts in your computer's System Preferences.)

Actions ⟩ HTML ⟩ Emphasize (shift command I)

If you have some selected text, Emphasize will wrap it in <em> tags. If no text is selected, Emphasize will insert the following (pipe represents cursor):

<em>|</em>

Actions ⟩ HTML ⟩ Strong (shift command B)

This action is identical to Emphasize above, except that it inserts <strong> tags.

Actions ⟩ HTML ⟩ Tag Manipulation ⟩ Remove Tag (control shift K)

Remove Tag finds the nearest wrapping HTML tag, and then will remove both its opening and closing tag (adjusting child tags' indentation level, if necessary).

Actions ⟩ HTML ⟩ Tag Manipulation ⟩ Next Edit Point (control option right)

Next Edit Point moves your cursor between areas in your HTML code that you likely wish to edit. For instance, it will jump to between empty attributes, empty tags, and empty lines between tags.

Actions ⟩ HTML ⟩ Tag Manipulation ⟩ Previous Edit Point (control option left)

Identical to Next Edit Point, but moves to the left of the cursor.

Actions ⟩ HTML ⟩ Wrap Selection In Tag (control shift W)

Wrap Selection In Tag will insert a tag around your selected text. After invoking the action, simply type the tag you wish to use and add any attributes you need.

Actions ⟩ HTML ⟩ Wrap Selected Lines In Tag (control shift command W)

This action is identical to Wrap Selection In Tag, except that it wraps each line in your selection in the same tag (very handy for wrapping a plain text list with <li> tags, for instance). It will ignore empty lines.

Actions ⟩ HTML ⟩ Wrap Selection In Link (control shift L)

Wrap Selection In Link is identical to Wrap Selection In Tag, except that it will check your clipboard, and if the top item appears to be a URL will use it for the href attribute.