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

There are already elements for those things you list: ``, `<meta name="description"/>`, and `<link rel="icon"/>` — Wesley Murch, Nov 10 '12 at 02:13
There's a difference between this elements and the creation of a pattern of information as Facebook does. — Cainã, Nov 10 '12 at 02:23
What is the actual problem you are facing? I'm certain there's a better solution. In other words, what is your end goal? — Wesley Murch, Nov 10 '12 at 02:28
There are several existing questions on the same topic, search e.g. for **custom html tags**. — Jukka K. Korpela, Nov 10 '12 at 06:42
@JukkaK.Korpela This is _hardly_ and "exact duplicate" of the question you guys listed. If this is to be closed as a duplicate then at least give a question that is an _actual_ duplicate. — Yes Barry, Nov 10 '12 at 20:28

Marat Tanalin · Answer 1 · 2012-11-10T02:03:51.443

4

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.

edited Nov 10 '12 at 02:03

answered Nov 10 '12 at 01:50

Marat Tanalin

13,927
1
36
52

Interesting proposal. I'd not seen that before. I think the big issue is what problem is it that custom elements are trying to solve. All you say in the proposal is that is that markup would be a bit simpler. For that, you'd be making HTML consumption significantly more complicated, and therefore I suspect most consumers wouldn't bother implementing the CSS-like rules, with the result that you would just have a free-for-all. That would make extending HTML in the future practically impossible. – Alohci Nov 10 '12 at 03:54

score 2 · Answer 2 · answered Nov 10 '12 at 01:57

2

Yes you should be able to do this if you render the page as XHTML (XML). Using <html xmlns="http://www.w3.org/1999/xhtml"> in your opening <html> tag. As Marat Tanalin said, it's "formally" invalid syntax.

You can parse the document various ways using simplexml_load_string() in use XPATH to query for those elements.

$fileContents = file_get_contents('/path/to/template', FILE_USE_INCLUDE_PATH);
$template     = simplexml_load_string($fileContents);
$myTags       = $template->xpath('//mysite');

answered Nov 10 '12 at 01:57

Yes Barry

9,514
5
50
69

So I can't use HTML5 header? – Cainã Nov 10 '12 at 02:01
@RedCurley I don't think you can..that's the only problem. It's a work around but it _does_ work. EDIT: try it, it should still work but it wouldn't be "correct" HTML5 syntax. But your needs seem very specific so maybe that is not a concern of yours? – Yes Barry Nov 10 '12 at 02:04
1

If you use XHTML, I think you still need to create your own, custom DTD to make it valid. – bfavaretto Nov 10 '12 at 02:08
@RedCurley yes, what bfavaretto said is true. That is important to keep in mind. – Yes Barry Nov 10 '12 at 02:08
Analysing this situation I think that something with HTML comments could be done such as ``. This could be an intersting approach. – Cainã Nov 10 '12 at 02:17
@RedCurley For some reason I wouldn't recommend _that_. – Yes Barry Nov 10 '12 at 03:11

score 2 · Accepted Answer · edited May 23 '17 at 11:43

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.

This isn't entirely true anymore, [custom elements are now a thing](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/). It's not finalized yet, but you can read the draft [here](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html). — beatgammit, Oct 25 '13 at 17:41

score 1 · Answer 4 · edited May 23 '17 at 11:56

1

See this question: Removing Chrome's "translate" DOM Property

Here, someone has used a non-standard attribute name (non-standard element names have potentially the same problem) only to find that the name has now been standardized and interpreted in browsers, and the questioner is faced with a horrendous work-around to avoid a massive amount of rework.

I've never seen a use case that justifies the risks involved.

Of course, if you happen to be as big as Google or Facebook, your non-standard name is likely to be well enough known to not be caught out by name clashes.

edited May 23 '17 at 11:56

Community

1
1

answered Nov 10 '12 at 02:00

Alohci

78,296
16
112
156

The post you link to is perfect evidence of why to avoid making up your own elements or attributes (very happy to see the standard data- attributes now). – Wesley Murch Nov 10 '12 at 02:07
@WesleyMurch: I agree with Alohci. see this `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.` its must not and not cannot. – naveen Nov 10 '12 at 16:40

Can I create a custom HTML tag in HTML5?

4 Answers4