HTML5中的自定义标记命名空间实现

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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.