CODEWITHSUNDEEP
javascriptcsshtml
Fat Monk
Fat Monk

Reputation: 2265

What is this HTML notation and how can I use it myself?

AddThis uses a notation which seems to extend the parameters available in an HTML div tag.

The tag that contains the button array can include additional parameters such as:

<div addthis:url="someUrl"> </div>

Along with defining some css classes for the element seems to give their JavaScript code access to manipulate this element AND read the value of the additional addthis: parameter.

I'd like to implement something similar myself but am confused as to how to correctly allow additional parameters in the standard HTML tags.

I've also seen the AddThis code throw W3C validation errors sometimes so wonder if this is entirely legitimate.

Searching around I've found some discussions about extending the HTML tags via extending the prototypes in JavaScript but everything I've read seems to be about adding new events etc.

This addthis:url notation looks more 'schema'-like to me, or am I on completely the wrong track?

I've made some progress on this, at least functionally, but what I have now breaks the HTML validation quite seriously.

To explain a little further what I am trying to achieve...

In the same way that AddThis allows you to include their sharing elements by adding a simple <DIV> tag to your page and including some JavaScript, I want to provide similar functionality with <IMG> tags.

Someone wanting to use this functionality will include an <IMG> tag that has some additional name=value pairs that are outside of the standard image tags attribute and are defined by my spec.

The JavaScript that is included will then read these additional attributes and perform some actions on the image tags.

To this end I have the following:

<IMG id="first image" class="imageThatCanBeWorkedOn" src="holding.png"
    my-API-name:attribute1="some data"
    my-API-name:attribute2="some other data">

I then use `getAttribute('my-API-name:attribute1') to access the additional tag data from JavaScript.

(I'm selecting all of the tags with a particular class name into an array and then processing each tag in turn, in case anyone is interested.)

This all works great - I can manipulate the <IMG> tags as needed based on the additional data, BUT the markup is not valid HTML according to the W3C validator.

With the above I get:

Warning Attribute my-API-name:attribute1 is not serializable as XML 1.0.
Warning Attribute my-API-name:attribute2 is not serializable as XML 1.0.
Error: Attribute my-API-name:attribute1 not allowed on element img at this point.
Error: Attribute my-API-name:attribute2 not allowed on element img at this point.

If I remove the : from the attribute name (eg my-API-name-attribute2) the 'not serializable' warnings disappear but I still get the 'not allowed' errors.

So how would I add these additional bits of data to an <IMG> tag and not invalidate the markup but while maintaining a level of clarity/branding by including the 'my-API-name' part in the way that AddThis does?

(I note from the comments that I could use data- attributes. I haven't tried these yet, but I'd prefer to be able to do this in the 'branded' way that AddThis seems to have managed without breaking their users' markup.)

Upvotes: 2

Views: 877

Answers (2)

Rounin
Rounin

Reputation: 29501

I'd like to implement something similar myself but am confused as to how to correctly allow additional parameters in the standard HTML tags.

Before HTML5, some web developers deployed a technique of adding custom data to an element's class attribute (or to any other attribute which will happily attach itself to any element).

This worked, but it was self-evidently a hack.

For this reason HTML5 introduced custom data-* attributes as the standard approach to extending an element's attributes - and data-* is precisely what you should be deploying.

So how would I add these additional bits of data to an tag and not invalidate the markup but while maintaining a level of clarity/branding by including the 'my-API-name' part in the way that AddThis does?

<img id="first image" class="imageThatCanBeWorkedOn" src="holding.png"
    data-myAPIName_attribute1="some data"
    data-myAPIName_attribute2="some other data" />

Further Reading:

Time Travel back to 2010: http://html5doctor.com/html5-custom-data-attributes/

Time Travel back to 2008: http://ejohn.org/blog/html-5-data-attributes/

Upvotes: 1

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146578

If we were talking about XML (which includes XHTML) it'd be a namespace prefix. In HTML5 it's just a regular attribute:

Attribute names must consist of one or more characters other than the space characters, U+0000 NULL, U+0022 QUOTATION MARK ("), U+0027 APOSTROPHE ('), U+003E GREATER-THAN SIGN (>), U+002F SOLIDUS (/), and U+003D EQUALS SIGN (=) characters, the control characters, and any characters that are not defined by Unicode.

... though slightly harder to manipulate (not too much, though) and totally non-standard.

Upvotes: 2

Related Questions