Sometimes when making templates, designers don't know if a link around a piece of text or an image will always be required. We can use the rule attribute to change the template code so that it works properly, whether a link is added or not.

First, let's look at a normal link:

<editable name="link">
<a href="http://google.com" style="color:green;">headline</a>
</editable>

We can use the rule attribute to remove the <a> tag if there is no value for href, like so:

 rule="{%remove_outer_unless href%}" 

However if we apply this to the <a> tag, we will also lose the style formatting to make the text green. We want that formatting to apply whether an <a> tag is present or not, so we need to add a <span> tag around the entire code snippet, and then add the style attribute to both. 

Complete Snippet

HTML

<span rule="{%remove_outer_if editables.link.href%}" style="color:green;">
<editable name="link">
<a href="" rule="{%remove_outer_unless href%}" style="color:green;"></a>
</editable>
</span>