This is a markup question. I’m working on a navigation system in which many of the links are tracked and a friendly name (used for a report given to the client) written to a database when they are followed. The past method of doing this was to write an onclick handler on each link, like so:
<a xhref="link.html" mce_href="link.html" onclick="trackFunction(parameter, parameter, parameter);">
What I thought of doing first was writing a class, assigning it a value, and using that class in an external JavaScript to call the function:
<a xhref="link.html" mce_href="link.html" class="tracking_name">
The problem with this is twofold: First, I’m using a class for something that isn’t really a class. It’s a specific name for a specific link, for the purpose of preparing a tracking report. Second, I have to do some cleaning of the value, because a class can’t have spaces or other characters. Since this is a friendly name, class is rather restrictive, and I’d have to write replace functions to clean up all the values. This is a long-term nightmare, and I’m not going to do it.
Third option: use a custom HTML attribute. All I have to do then is write:
<a xhref="link.html" mce_href="link.html" track="Friendly Tracking Name">
JavaScript will let me at this custom attribute, by using element.track element.getAttribute(’track’)
The only problem is that it is invalid HTML. We’re not going to go to the extreme of writing a custom DTD for this; we’d just use it and let it be invalid. My developer colleague argues that onclick is valid, and therefore would be better to use, and really, what’s the problem of a little behavior mixed into the HTML?
I’m having a hard time coming up with definitive reasons why the custom attribute is better; it just seems better to me. It’s more semantic, it at least uses markup, even if invalid, and it is cleaner and clearer to write from a front-end point of view.
