2

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.)

Fat Monk
  • 2,077
  • 1
  • 26
  • 59
  • 1
    that looks like an xml namespace. – Daniel A. White Nov 16 '16 at 15:43
  • 1
    I'd just use data attributes https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes – j08691 Nov 16 '16 at 15:45
  • He might be confusing HTML5 Data Attributes with an XML namespace. – Joshua Nov 16 '16 at 15:45
  • Apparently the HTML5 spec is [permissible enough to allow XML attributes](https://www.w3.org/TR/html5-diff/#syntax). ` ...` is valid HTML. – alex Nov 16 '16 at 15:50
  • Data attributes looks interesting... Reading up on that now. But yes, an xml namespace is exactly what it looked like to me (not schema as I wrote in the question), but how would you extend the document namespace to include your own from JavaScript? – Fat Monk Nov 16 '16 at 16:11

2 Answers2

2

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.

Community
  • 1
  • 1
Álvaro González
  • 142,137
  • 41
  • 261
  • 360
1

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/

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • I suspected that may be the case. How do AddThis manage it then? Are they using the 'class' attribute (I can't even guess how this would work!). And how would I support HTML < 5? – Fat Monk Dec 01 '16 at 12:43
  • AddThis will be using an additional technology (either server-side or client-side) alongside HTML5. I'm 99.99% certain that in 2016 HTML5 custom `data-*` attributes will work absolutely everywhere. This is absolutely the standard approach for including custom data within markup. – Rounin Dec 01 '16 at 13:05