Specifying Allowed Elements for a Snippet Set
A TypeMetal snippet set can, if desired, be configured to restrict authors to a subset of HTML’s element types.
This can be useful if:
- you administer a website, and want to provide a snippet set to authors that helps them constrain their markup to the site’s requirements, or
- you’re writing content for a website that doesn’t already provide a TypeMetal snippet set, and you want to create a snippet set to help you constrain your work to the site’s markup requirements
When you create a new snippet set, it starts out allowing all HTML elements that are known to any of the HTML document types TypeMetal supports. (Only elements that may appear within an HTML document’s <body> are relevant to a snippet set’s “allowed elements” specification.)
To view and edit the set of HTML elements that a snippet set allows, click the “Allowed Elements…” button that’s next to the “Validate as:” document type button, near the top of the snippet set window:
This displays a popover, that shows the allowed/disallowed state of each known HTML element using a checkbox:
This interface can be daunting at first, because HTML defines a substantial number of element types, but TypeMetal makes it easier to work with by classifying the elements into groups that can be easily toggled with a single click, and by indicating elements that are not applicable to the snippet set’s chosen document type. Most of the type, you’re likely to want to enable and disable broad categories of elements, then make a few individual-element adjustments. Once you’ve specified a snippet set’s allowed elements, you can close this popover (by clicking its “Close” button, or by clicking the “Allowed Elements…” button again, if it’s visible) and forget about it.
Elements that don’t exist in the snippet set’s chosen HTML document type are indicated with a pink background. Chances are, you’ll want to uncheck these, or choose a different document type (though including these elements is harmless, since TypeMetal will never insert invalid elements into an HTML file, regardless of what the HTML file’s snippet set indicates is allowed).
Clicking the checkbox for any element group toggles all of the elements in that group on or off. For example, you can click the “Non-Semantic Styling” to allow or disallow all of the elements it contains checkboxes for. You can undo any edit you make to the allowed element set, by pressing Command+Z or choosing Edit → Undo.
Clicking the checkbox for any individual element toggles that element on or off, and may also toggle elements that it requires or that require it. For example, TypeMetal knows you can’t create an ordered list or unordered list (<ol> or <ul>) without list items (<li>), so when you check <ol> or <ul> to indicate they are allowed, TypeMetal makes sure <li> is allowed too. Likewise, if you uncheck <li> to indicate list items aren’t allowed, TypeMetal unchecks <ol> and <ul> too.
The “Check All” button provides a convenient way to check all elements. “Uncheck All” unchecks them all.
Click the “Close” button or the “Allowed Elements…” button again, to dismiss the popover when you’re done.
The checkboxes for a few elements are shown as disabled, because they must be allowed or disallowed as a group. For example, if you’re going to allow HTML “definition lists” in your documents, you’ll need the list (<dl>), term (<dt>), and definition (<dd>) elements, and can’t do without any of them. Toggle the “Definition Lists” check box to toggle these elements on and off together.
Next Steps
Put that allowed elements popover away — It’s time to get started creating snippets!