Utility tags are there for the little things you can't do with <editables> and <fields>.
Use utility tags to hide ESP or other code from Taxi so no one can edit it, or show content that only appears in Taxi and then gets removed when you export.
They can also be used to make complex code such as mso comments, which can be used to control background images in Outlook, easy to edit in Taxi, without needing any of the technical knowledge.
Music: https://www.bensound.com/royalty-free-music
The <content> tag is a self destructing tag - at export the tag is removed, but any content it contains remains. It is useful if you need to apply content or a rule to a certain area, and don't have any other tags that can contain a replace="" or rule="" attribute.
<content rule="{% remove_unless navtext1 %}"> | </content>
Taxi uses the HTML DOM hierarchy to work out where to put content. It does its best to handle non-semantic HTML but sometimes it's necessary to smuggle things through which, from a DOM point of view, do not make any sense at all.
Also some email platforms use coding languages that are similar to Taxi Syntax, so you can use the <escape> tag to add ESP code to your Email Design System and then hide it from Taxi.
That is when the <escape> tag is here to help. Everything between <escape> and </escape> is quarantined by Taxi when the Email Design System is uploaded and put back into the document at the last stage of export. The content of the <escape> tag will not appear in the email preview.
You can use the <escape> tag to hide HTML that will cause rendering errors if viewed before it is run through your email platform:
<escape>unsubscribe="tracking"value""userid""campaignid"" </escape>
You can also use the <escape> tag to hide unsightly or long email platform code
<escape>%%FIRST_NAME_ONLY%%</escape>
This can be wrapped around content which is intended only for the email preview and not the final send. It is, effectively, the reverse of the <escape> tag. Typically it is used with the <escape> tag to give placeholder content for things which would otherwise be invisible. At export the content within <taxi-preview-only>, and the tag itself, is removed.
You can use this in conjunction with the <escape> tag, for example:
<escape>{{unsubscribe}}</escape>
<taxi-preview-only>Unsubscribe link goes here</taxi-preview-only>
You may use code from your ESP or another third party platform in your HTML that you don't want visible when creating emails but you do want to be able to edit and configure. For example, a block of code that pulls in a unique barcode image for anyone who opens the email. You can include this within your HTML and have it hidden but make elements such as the height or width of the barcode image editable.
First, include a field for the content or code you want to be able to edit.
<field type="number" name="barcode_height" default="100"></field>
Place <escape> tags around the code you want hidden and non editable. Then around the code or content you want to be able to edit, use a <content> tag and use a display:none style. This will keep it hidden in Taxi but enable you to edit it.
<escape>ESP specific code</escape>
<content style="display:none" replace="{{barcode_height}}"> ESP code to edit</content>
You can also see an example of this when including background images in your Email Design System.