[html5] Processing instruction

[Benjamin Hawkes-Lewis]

On Sun, Jan 8, 2012 at 12:48 PM, David Leunen <leunen.d at gmail.com> wrote:
> Hi,
>
> How do I markup a metadata at a specific position in an HTML document ? Not
> *on* elements (I'd use microdata/RDFa for that) but, let's say, *between*
> two of them for example.
> As I understand it, processing instructions are not allowed in HTML5. Am I
> correct ?
> If so, what is the equivalent  ?
>
>  Should I use :
> - an empty <span data-foo="bar"/> for that ?
> - an empty <hr> ?
> - a comment ?
> - a PIs anyway (because even if not allowed, they seem to be treated like
> comments anyway) ?
> - something else ?
>
> (The semantic meaning of the metadata is more of less "this is where my
> application may insert comments")

@class, @data-, or RDFa are certainly extension points you could use:

http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#classes

http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes

http://dev.w3.org/html5/rdfa/

"span" and "div" carry no semantic meaning, so it's fine to use them
as arbitrary data markers.

If your use-case is putting templates directly into your DOM, @hidden
is perhaps the feature best suited, although current support is poor:

http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute

For example to indicate where to add a comment, you might do something like:

<section>
   <h2>Comments</h2>
   <article>
      <address>John Doe</address>
      <p>Hello world!</p>
   </article>
   <article hidden data-yourappname-template-populate="comment">
      <address data-yourappname-template-populate="author"></address>
      <div data-yourappname-template-replace="text"></div>
   </article>
</section>

--
Benjamin Hawkes-Lewis