Editing Element Attributes
An HTML element is allowed to carry a list of attributes — properties whose values can be specified. TypeMetal makes it easy to add, edit, and remove attributes, and determine the valid attributes and values for a given element, all while keeping your fingers on the keyboard for maximum speed and agility.
The Attribute Editor UI
To edit an element’s attributes, you summon the attribute editor by:
- pressing Command+L, or
- choosing Structure → Edit Attributes of <element>…, or
- right-clicking in the content area and choosing Edit Attributes of <element>… from the context menu
- right-clicking an element segment in the path bar and choosing Edit Attributes of <element>… from the context menu
TypeMetal infers the target element from where you right-clicked, or from the current insertion point or selection, and opens the attribute editor for that element.
The attribute editor indicates the name of the element it’s been opened for, and TypeMetal highlights the targeted element in the document. From here, you can edit the element’s attributes, or jump to adjacent elements as described below.
The Attribute List
Below a search field that sits ready to accept attribute name completion strings, the attribute editor lists the attributes that the element currently has, along with their values.
A validation status light at the right of each attribute value indicates whether the value appears to be valid (according to the requirements set forth in the official W3C HTML specifications).
- A green light means the value appears to be valid.
- A yellow or red light indicates a small or serious problem. You can click the light to see a description of what the field requires.
- A clear light indicates an attribute that TypeMetal doesn’t validate. TypeMetal doesn’t currently have facilities to validate JavaScript or CSS syntax, and certain other kinds of attributes, but it validates the most common and simple attribute types.
Navigating the Attribute List
You can press the ↓ and ↑ keys to step through the attribute list.
You can also type in the search field to select a desired attribute via completion, much as you do in the element-and-snippet completion UI. This works for both adding a new attribute and jumping to an attribute that the element already has.
When you start typing in the attribute editor’s search field, TypeMetal shows you a list of attributes that can be applied to the element. The list includes any attributes that the element already has (even if they are user-defined attributes that aren’t in the HTML spec).
As with the element-and-snippet completion UI, type until you’ve brought the attribute you want to add or jump to to the top of the list, then press the Return key or spacebar to make your selection. (You can also use the ↓ and ↑ keys to navigate the list, and can double-click any row to choose its attribute.)
Tip: To add a user-defined attribute, that is not part of the HTML spec, you must have “Allow user-defined attributes” enabled in TypeMetal’s General settings panel. Then, when completing an attribute name as above, hold the Option key while pressing the Return key or spacebar. This suppresses matching to a known attribute, and makes TypeMetal accept the exact attribute name you typed instead.
If the element already has the named attribute, TypeMetal puts you in the attribute’s value field, so you can edit its value. You can also remove (delete) the attribute if you want, by pressing Command+Delete, or by clicking the (-) button to its left.
If the element doesn’t yet have the named attribute, TypeMetal adds the attribute to the element, and puts you in the attribute’s value field so you can type the desired value. You can also paste text from the pasteboard, as in any other text field, by pressing Command+V.
TypeMetal validates the attribute value as you type (and/or paste), and alerts you with an orange or red light if there’s a problem.
When you are done viewing and editing an element’s attributes, you can exit the attribute editor by pressing Esc, or by pressing Command+L again.
Jumping to Adjacent Elements
TypeMetal provides handy keystrokes you can use to hop the attribute editor from element to element. Press any of the four arrow keys while holding down the Command and Option keys, to:
| Keystroke | Command |
|---|---|
| ⌘⌥↑ | Jump to the element’s parent |
| ⌘⌥← | Jump to the element’s previous sibling element |
| ⌘⌥→ | Jump to the element’s next sibling element |
| ⌘⌥↓ | Jump to the element’s first child element |
The attribute editor hops to the specified element, enabling you to see and edit its attributes. If there isn’t a suitable element in the direction you requested, TypeMetal lets you know with a brief message overlaid atop the content area. For example, if you press ⌘⌥→ but there is no next sibling element to jump to within a containing <section>, the message will be “At end of <section>”. If you want to continue moving forward in your document, you’ll probably want to climb up one or more levels (⌘⌥↑) and proceed from there.
You can use these same navigation keys within your content when the attribute editor isn’t open. In the attribute editor, they skip text nodes and only land on elements.
Toggling Block Mode and the Source Loupe
You can toggle Block Mode and show or hide the Source Loupe while the attribute editor is open, using their usual View menu keyboard shortcuts:
| Keystroke | Command |
|---|---|
| ⌥⌘] | Show/Hide Block Mode |
| ⌥⌘U | Show/Hide Source Loupe |
Block Mode in particular will probably be useful to enable when you’re hopping from element to element, as it indicates element selection more clearly than normal content viewing mode can.
Editing Image Attributes
The attribute editor shows a special value module for an <img> element’s “src” attribute (which identifies the referenced image file), when you’re editing a standalone HTML file. This value module gives you the ability to make and use a resampled copy of an image (downsampled for appropriate size and faster downloading, usually), save a copy of the original image to a different file format, specify a different display size for the image, or choose a different image to use. See “Editing Image Attributes” for details.
<img> Element