Alt

From Frontal Wiki

Introduction to the alt Tag

The 'alt' tag is used to provide alternate content for any other Frontal element. It is used during the Frontal SEO conversion process in which the Frontal definition is converted to HTML to improve search indexing.

The basic form of this tag is:

<alt>
    <!-- Alternate content including XHTML. -->
</alt>

To understand the use of this tag, we must briefly mention the SEO conversion process. In that process, a Frontal definition is ultimately converted to HTML but there are several steps involved. In one of those steps, the Frontal XML definition is augmented and altered in a way that adds useful information for the SEO Converter. The output is still XML but it is different from the original Frontal definition. One of the ways it's different is that where needed, Frontal elements that would not convert well to HTML may be replaced with alternate content. For example, here is a small Frontal definition:

<img altId="imgAltContent" src="mrtgCalc.swf" />
<alt id="imgAltContent">
    A mortgage calculator.
</alt>

In this definition, we're proposing that "mortgageCalculator.swf" is an external SWF that is loaded into the Frontal definition to provide a mortgage calculator. It would be nice for the search engines to know your site had a mortgage calculator but without some text indicating this, there's not much hope. But with the 'alt' tag, we have a mechanism to replace this obscure, difficult to index 'img' tag with a piece of text that is easy to index. We could even, if we so desired, provide a JavaScript implementation of the mortgage calculator as long as it was in XHTML (and thus valid XML).

When an element is processed by the SEO Converter, the "altId" attribute is checked. If it is found, then the converter looks for an 'alt' tag with a matching id. If it is found, then its contents are used to replace the original element. So after, the converter is done with our snippet, this is the result; the 'img' element is replaced with the contents of the 'alt' element:

A mortgage calculator.

Note that a single 'alt' tag may be used to replace multiple elements. For example, here we replace two mortgage calculator images with the same alt tag:

<img altId="imgAltContent" src="mrtgCalc.swf" />
<alt id="imgAltContent">
    A mortgage calculator.
</alt>
<img altId="imgAltContent" src="mrtgCalc.swf" />

resulting in this post conversion:

A mortgage calculator.
A mortgage calculator.

Methods

'alt' is a non-visual element implemented by the DocElemAlt class which extends the DocumentElement class. As such, all of the methods provided by that class may be used with the 'alt' tag.

Styles

The 'alt' tag does not have any particular styles beyond those applicable to all DocumentElement-based tags. See Tag Classes, Inheritance, Styles, Attributes & Methods#Styles for those.

Attributes

The 'alt' tag supports a special attribute named "target." This attribute is largely for future functionality in which the conversion process may support multiple targets. Currently, the only understood value for target is "html" and that is the default value.

The altContent Attribute

The 'alt' tag is most useful when the replacement for an element is complex. In the examples we gave above, it is rather simple. In that case, there is another alternative which is the "altContent" attribute. This attribute may be applied to any element in the Frontal document and its value will be used to replace the element during conversion. So our first example could have been written like so to achieve the same results:

<img altContent="A mortgage calculator." src="mrtgCalc.swf" />

Keeping Your Alternate Content Separate

The 'alt' tag contents are not used when rendering the Frontal definition and so having it in your main definition can make it difficult to edit and read and slower to load. Therefore, Frontal supports a technique by which all of the alternate content may be put in a separate file that is only loaded by the SEO Converter. To do this, put the 'alt' tags in a separate file and then include it in your main definition using the 'include' tag with the "rel" attribute set to "alt." For example, rewriting our original example:

<include rel="alt" src="altContents.xml" />
<img altId="imgAltContent" src="mrtgCalc.swf" />

Then in a separate file named "altContents.xml" we would have this:

<alt id="imgAltContent">
    A mortgage calculator.
</alt>

In this example, the file "altContents.xml" would not be loaded during the normal rendering of the Frontal document. It would only be used by the SEO Converter during the conversion process.