Can I create a custom HTML tag in HTML5?

Question

I was wondering if I can create a custom HTML tag with the same functionality of Facebook's Open Graph meta tags for my site.

I was thinking of something like this:

<mysite title="My website title" description="Some description" 
    image="http://mysite.com/image.png">

And then use PHP to fetch this data (I can already do this with meta-tags).

Some points:

• I use HTML5, are there any syntax problems using this method?

• Google+ uses something like this: g:plusone

Answer 1

Main issue is that custom elements are formally invalid.

Here's what the docs say:

Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

HTML5 Elements

By the way, there was a solid future-proof proposal as for custom elements in W3 bug-tracker, but it has been rejected by a cool guy Hixie as usual.

Answer 2

Marat Tanalin is right, in HTML5 you are not allowed to "invent" elements/attributes/values that are not specified. Alohci gives a nice example why that is the reason.

mmmshuddup notes, that you could use XHTML5. However, I think it would be allowed in that case, if you extend the vocabulary formally correct. It's XML, after all. It couldn't be a polyglot (X)HTML5 document anymore, though.

I think there may be a (X)HTML5 solution that could work for you (depends on your specific use case, though): the data-* attribute:

<div data-title="My website title" data-description="Some description" data-image="http://mysite.com/image.png">…</div>

You can "invent" attributes that start with data- followed by a string you are free to define.

Another possible (more complex) way might be to use microdata with an existing vocabulary that suits your needs (if you can't find one, you could create one yourself). I would only go this way if the (meta)data you want to provide is valuable for others.