5

For an audio player I'm building, I'd like to have a tag similar to what Google and Facebook use for their share widgets. For example, it could be:

<fp:player data-type="mp3" data-href="/path/to/file.mp3" />

What's the best way to implement this custom tag, and have it be valid in as many browsers as possible?

1
  • Could you perhaps convert the <fp:player ... /> tag on the server side into valid HTML before sending it to the client? Or do you specifically want that tag in your source code?
    – HellaMad
    Dec 16, 2011 at 18:38

3 Answers 3

3

The above-linked specification also states,

User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.

Quentin's posted quote, if I understand the specification correctly, is referring to user-agent extensions. (By which I assume they mean both special browsers and browser plugins.) User-agents should not create new tags or attributes. Web developer can use whatever made-up tags and attributes they like. And the specification explicitly instructs user-agent developers to account for unknown tags and attributes, and include them in the DOM and when rendering the page.

Accessing them with script is where it becomes a little tricky. IE's 7 and 8 for you to add a namespace to find those custom tags, which makes your document technically invalid -- but still fully functional!

See here (my blog): http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html

5
  • The user was asking about valid markup. As you note, it is "technically" invalid. You can hack things to make it work, but that does not mean you should. Oct 17, 2012 at 14:11
  • Also note that it is required for you to disclose that you are linking to your own blog; a fact which makes its use as a reference for your answer quite suspect. Oct 17, 2012 at 14:12
  • I've edited above to note that it's my blog. And yes, I understand the concern for validity, hence explicitly spelling out point at which the code becomes invalid (adding a namespace). My concern, however, was the hasty, incomplete manner of the first (chosen) answer, which suggests that custom tags are off limits for developers, which isn't quite what the specification states. The specification actually states the opposite. It's only in introducing a hack to force IE's 7 and 8 into compliance that it becomes invalid -- but still functional.
    – svidgen
    Oct 17, 2012 at 18:06
  • ... the selected answer was simply incomplete and misleading, IMO. And I'm sorry, I didn't realize linking to a related article I wrote required me to explicitly note it. I figured it was obvious by my screenname!
    – svidgen
    Oct 17, 2012 at 18:08
  • Understood! Not everyone looks too closely at the URLs to see such items, so this just makes it very clear. That's a great edit. Thanks! Oct 17, 2012 at 18:58
1

From the HTML specification:

For markup-level features that are intended for use with the HTML syntax, extensions should be limited to new attributes of the form "x-vendor-feature", where vendor is a short string that identifies the vendor responsible for the extension, and feature is the name of the feature. New element names should not be created

So you can't create it and conform to the specification and Facebook and Google are very, very naughty.

You appear to be trying to reinvent the <audio> element anyway. So just use that and the problem of extending the langage goes away.

3
  • Not reinventing <audio>, I'm making a generic tag for several types of audio embeds.
    – Carson
    Dec 16, 2011 at 21:49
  • <audio> is a generic tag for several types of audio embeds.
    – Quentin
    Dec 17, 2011 at 8:48
  • I'm choosing this answer because it clarifies that new element names should not be created.
    – Carson
    Dec 21, 2011 at 17:01
0

observe how the html5shim or the html5shiv create new elements: https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js

essentially you just have to document.createElement() the element, then you can use it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.